如何绑定指令范围的深层子属性？答案

【问题标题】：How can I bind deep child property of directive's scope?如何绑定指令范围的深层子属性？
【发布时间】：2017-03-03 22:57:31
【问题描述】：

亲爱的朋友们，

我们可以将指令的范围属性绑定到 DOM 属性的值。

这行得通：

module.directive 'MyDirective', ->
  scope:
    directiveVar: '='

...

<div class='MyDirective' directive-var='parentVar'></div>

在上面的示例中，我们将指令的directiveVar 属性绑定到父作用域的parentVar 属性。

这是一个双向绑定，所以如果directiveVar 被更改，parentVar 会自动更新，反之亦然。

我的问题是：

有没有办法可以绑定指令范围的深层子属性？喜欢scope.lv1.directiveVar 或scope.lv1.lv2.lv3.directiveVar 而不是scope.directiveVar？

Docs I read

我想要达到的目标

我在指令范围内有一个名为 lv1 的对象。我想将其属性directiveVar 绑定到父属性。

这不起作用：

scope:
    lv1:
        directiveVar: '='

这不起作用：

scope:
    "lv1.directiveVar": '=myVar'

演示

这是有效的：http://plnkr.co/edit/OClnZ2Cl3BXr60PC2qVP?p=preview

这就是我想要实现的：http://plnkr.co/edit/tQEHeKOzGjGyplCwUtU2?p=preview

【问题讨论】：

您需要这个的意图/目的是什么？你想达到什么目的？（它可能会帮助人们给你一个更好的答案）。孩子的作用域是更多指令还是指令和控制器？
同意，这里没有足够的信息来说明您想要实现的目标。如果 parentVar/myVar 是一个对象，你应该使用 '=' 而不是 '@' 来绑定到对象而不是字符串。
@CorySilva 感谢您的反馈。我想实现：我想绑定一个深层属性，而不是绑定我的指令范围的根属性。更新了问题以使其更清楚。
@CraigSquire 感谢您的纠正。我的意思是“=”而不是“@”。很抱歉造成混乱。

标签： angularjs coffeescript angularjs-directive angularjs-scope

【解决方案1】：

我希望这段代码会有所帮助。你可以传入一个对象并观察它的属性，或者你可以在父/子指令中嵌套一些东西。无论哪种方式添加“=”都将启用对整个对象的双向绑定。

控制器：

$scope.directiveVar = {
   level1: {
       greeting: 'Hello'
   }
};
$scope.otherVar = {
    levelA: {
        foo: 'bar'
    }
};

标记：

<div data-my-parent-directive data-other-var="otherVar">
    <div data-my-directive data-directive-var="directiveVar"></div>
</div>

指令：

angular.module('MyDirective', [])
.directive('myParentDirective', ['$window',
    function ($window) {
        return{
            restrict: 'AE',
            scope:{
                otherVar: '='
            },
            controller: function($scope, $element) {
                var othis = this;
                this.element = $element;
                this.otherVar = $scope.otherVar;
            }
        };
    }
])
.directive('myDirective', ['$window',
    function ($window) {
        return {
            restrict: 'AE',
            require: '?myParentDirective',
            scope: {
                directiveVar: '='
            },
            link: function(scope, elm, attr, myParentDirectiveCtrl) {
                console.log(myParentDirectiveCtrl.otherVar);
                console.log(myDirectiveParentCtrl.otherVar.levelA);
                scope.$watch('directiveVar.level1', function (newValue, oldValue){
                    console.log(newValue, oldValue);
                });
            }
        };
    }
])

编辑：

你可以这样做：

<div data-my-parent-directive data-other-var="otherVar">
    <div data-my-directive data-directive-var="directiveVar.level1"></div>
</div>

这在建模数据时很有用。例如：

var items = apiService.getItems();
var layers = [...],
$scope.map = {
    points: items,
    layers: layers,
    highAltMap: 'Streets',
    lowAltMap: 'Satellite'
};

也就是说，如果您正在建模数据，请参阅 ng-conf video，我相信演讲者谈到了一些 OO 模式。

编辑 2：

您可以使用服务like this plunker

【讨论】：

非常感谢@CorySilva。我是 AngularJS 的新手，只有 6 个月的练习。我想要实现的是绑定子属性（directiveVar.level1）而不给父级访问整个对象（directiveVar）。有没有一种简单的方法可以在指令的声明中声明它而无需编写大量代码？
感谢您的更新。 data-directive-var="directiveVar.level1" 绑定了父作用域的深层属性“level1”，很好。但我需要相反：绑定 CHILD 范围的深层属性，例如“lv1.directiveVar”：“=var”。抱歉，这里很难解释 AngularJS 的细节，我的错。
哈哈没问题；我只是被厚厚的脑袋。我想你会想要创建一个服务，然后从你的指令中观察服务上的一个函数，它返回一个缓存的对象。如果可以，请分享一下您正在尝试做的事情。
更新了帖子并添加了两个plunk。感谢您的耐心等待，@CorySilva。

【解决方案2】：

我知道问题的日期，但是...

Create json object in attribute

return {
  scope: {
    date: "=",
    formChange: "=?",
    ngDisabled: "=?",
    deepInclude: "=?"
  },
  ...

&lt;user-date-without-current-date date="cv.dateBirthday" deep-include="{cnt:cv.dateBirthday}" form-change="$parent.form_change"&gt;&lt;/user-date-without-current-date&gt;

有用吗？

【讨论】：