Data binding 如何在angularjs中动态绑定指令？

我有一个指令，需要在控制器中显示来自对象的数据。必须显示的数据段由指令的属性和基于其他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;
        }
    }
});

app.directive（'editable'，function（）{
返回{
模板：“数据：{{val}}”，
链接：函数（范围、元素、属性）{
元素。包裹（“”）；
数据=scope.blocks[属性可编辑]；
val=数据；
}
}
});

和HTML格式：

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

text1应该显示在这里
文本2应显示在此处

---

我怎样才能做到这一点？我是否以正确的方式处理了这个问题？

指令中的'data:{{val}}'指令期望在范围中定义“val”（但它不是）

您可以创建一个带有“scope:true”的本地作用域来保存val变量。 （见范围一节）

类似这样的方法会奏效：

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;
        }
    }
});

app.directive（'editable'，function（）{
返回{
模板：“数据：{{val}}”，
范围：正确，
链接：函数（范围、元素、属性）{
元素。包裹（“”）；
数据=scope.blocks[属性可编辑]；
scope.val=数据；
}
}
});

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

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

<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>

文本1应显示在此处
文本2应显示在此处

和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>');
    }
  }
});

angular.module（'app'，[]）.controller（'EditorCtrl'，function（$scope）{
$scope.blocks={
标题：“text1”，
正文：“text2”，
};
}).directive（'editable'，function（）{
返回{
模板：“数据：{{text}}”，
范围：{
“文本”：“=可编辑”
},
链接：函数（范围、元素、属性）{
元素。包裹（“”）；
}
}
});

---

使用“text”：“=editable”范围声明，可以在本地范围文本变量和父“blocks.header/body”（可编辑DOM属性的内容）之间设置双向绑定。blocks变量中的任何更改都将自动反映在DOM中。

这在第一次glace时看起来还可以-您可以创建一个Plunk来查看是否重新创建它吗？