Angularjs 如何绑定指令'；什么范围？

亲爱的朋友们

我们可以将指令的scope属性绑定到DOM属性的值

这项工作：

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

这是行不通的：

scope:
    lv1:
        directiveVar: '='

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

---

演示

这就是工作原理：

---

这就是我想要实现的目标：

我希望这段代码能有所帮助。您可以传入对象并查看其属性，也可以在父/子指令中嵌套对象。无论哪种方式添加“=”都将在整个对象上启用双向绑定

控制器：

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

标记：

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

---

编辑：

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

也就是说，如果你是建模数据，我相信演讲者提到了一些OO模式

编辑2:

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

---

您可以使用服务

我知道问题的日期，但是

返回{
范围：{
日期：“=”，
formChange:“=？”，
ngDisabled:“=？”，
包括：“=？”
},
…

您需要此功能的意图/目的是什么；您试图实现什么？（它可能会帮助人们给您更好的答案）。子作用域是更多指令还是同时包含指令和控制器？同意，这里没有足够的信息说明您要实现什么。如果parentVar/myVar是一个对象，您应该使用“=”而不是“@”来绑定对象，而不是字符串。@CorySilva感谢您的反馈。我想实现：而不是绑定根p我的指令范围的属性我想绑定一个深度属性。更新了问题使其更清晰。@CraigSquire感谢您的更正。我的意思是“=”而不是“@”。很抱歉混淆。非常感谢@CorySilva。我是AngularJS的新手，只有6个月的实践。我想实现的是绑定子属性（directiveVar.level1）不允许父对象访问整个对象（directiveVar）。有没有一种简单的方法可以在指令的声明中声明它而无需编写大量代码？感谢您的更新。data directive var=“directiveVar.level1”绑定深层属性“level1”但我需要相反的东西：绑定子范围的deep属性，比如“lv1.directiveVar”：“=var”。抱歉，这里很难解释AngularJS的详细信息，我的坏。哈哈，没问题；我只是被蒙在鼓里。我想你会想做一个服务，然后根据你的指令在服务上观察一个返回缓存对象的函数。如果你能，分享你正在尝试做的事情。更新帖子并添加了t谢谢你的耐心，@CorySilva。