隔离范围"="绑定和溺爱符号AngularJS

War*_*ren 6 javascript angularjs angularjs-directive

如何使用点分表示法在隔离范围中创建具有嵌套属性的双向绑定.我认为'myObject.data': "=data"会起作用,但事实并非如此.我不想链接myObject对象中的所有内容.我知道我可以做某种手表,但'myObject.data'看起来更干净.

.directive("myDirective", [function() {
    return {
        restrict: "E",
        scope: {
            'myObject.data': "=data"
        },
        link: function (scope, element, attrs) {

            scope.myObject = {
                 data: "myValue"
            };
        }
     };
 }])
Run Code Online (Sandbox Code Playgroud)

mor*_*man 8

隔离范围通常仅对模板有用,它们不应用作声明您希望如何解释指令属性的方式.这是因为大多数没有模板的指令通常需要子范围或其环境的直接范围的语义.

在你的情况下,你可能甚至不需要$ watch,因为对象引用是启用双向数据绑定的,但没有你的完整代码我无法确定.

如果您想知道隔离范围语义的翻译只是一个正常的翻译:

@name -> attrs.name
=name -> $scope.$eval(attrs.name);
&name -> function() { return $scope.$eval(attrs.name); } 
Run Code Online (Sandbox Code Playgroud)

编辑2:

在您的评论之后,我想出了这个傻瓜.要保留双向数据绑定,您必须使用".".在您的ng-model声明中.这是因为双向数据绑定不适用于值类型,因为它们是不可变的.例如,您无法更改值100.您需要传递一个引用类型对象并挂起您正在更改它的值.基于双向数据绑定可能的原则,您无法在隔离范围定义中指定值的完整路径.

使用Javascript:

angular.module('plunker', [])

.directive('twoWay', function() {
  return {
    restrict: 'E',
    template: '<div><input ng-model="thing.name" type="text" /></div>',
    scope: {
      thing: "="
    }, 
    link: function(scope, element, attrs) {
    }
  };
})

.controller('MainCtrl', function($scope) {
  $scope.data = {
    name: "World"
  };
});
Run Code Online (Sandbox Code Playgroud)

HTML:

  <body ng-controller="MainCtrl">
    <p>Hello {{data.name}}!</p>
    <two-way thing="data"></two-way>
  </body>
Run Code Online (Sandbox Code Playgroud)