1

我有一个指令需要显示控制器中对象的数据。必须显示的数据由指令的属性和基于其他 dom 元素的一些其他计算确定。

这是一个简化的例子。

我有这个数据：

app.controller('EditorCtrl', function($scope) {
    $scope.blocks = {
        header: 'text1',
        body: 'text2',  
    };
});

我希望它与这个指令一起显示：

app.directive('editable', function() {
    return {
        template: 'data: {{val}}',
        link: function(scope, element, attrs) {
            element.wrap('<div class="editable"></div>');
            data = scope.blocks[attrs.editable];
            val = data;
        }
    }
});

在 HTML 中：

<h1 editable="header">text1 should be displayed here</h1>
<h1 editable="body">text2 should be displayed here</h1>

我怎样才能做到这一点？我是否以正确的方式解决问题？

4

1 回答 1

3

指令中的“数据：{{val}}”指令期望在范围内定义“val”（它不是）。

您可以使用“scope:true”创建一个本地范围来保存 val 变量。（参见http://docs.angularjs.org/guide/directive范围部分）。

像这样的东西会起作用：

app.directive('editable', function() {
    return {
        template: 'data: {{val}}',
        scope: true,
        link: function(scope, element, attrs) {
            element.wrap('<div class="editable"></div>');
            data = scope.blocks[attrs.editable];
            scope.val = data;
        }
    }
});

在 AngularJS 中，子作用域原型继承自其父作用域，因此即使您正在创建一个新作用域，您仍然可以访问 blocks 对象。

话虽如此，以前的解决方案会使父块对象中的更改很难立即反映在 DOM h1 节点中。相反，我会做这样的事情：

<div ng-app="app" ng-controller="EditorCtrl">
   <h1 editable="blocks.header">text1 should be displayed here</h1>
   <h1 editable="blocks.body">text2 should be displayed here</h1>
</div>

和 JS：

angular.module('app', []).controller('EditorCtrl', function($scope) {
  $scope.blocks = {
    header: 'text1',
    body: 'text2',  
  };


}).directive('editable', function() {
  return {
    template: 'data: {{text}}',
    scope: {
        'text': '=editable'   
    },
    link: function(scope, element, attrs) {
        element.wrap('<div class="editable"></div>');
    }
  }
});

使用 'text': '=editable' 范围声明，您正在本地范围文本变量和父级“blocks.header/body”（可编辑 DOM 属性的内容）之间建立双向绑定。blocks 变量的任何变化都会自动反映在 DOM 中。

于 2013-05-13T16:04:27.910 回答