如何将复杂属性从父作用域继承到指令的独立作用域 [英] How can I inherit complex properties from the parent scope into my directive's isolated scope

问题描述

在查看了 AngularJS(和相关)文档和其他有关指令中的隔离作用域的 stackoverflow 问题后，我仍然有点困惑.为什么我不能在父作用域和指令隔离作用域之间进行双向绑定，其中父作用域属性是对象而不是属性?我应该在 scope.$parent 之外使用所需的属性吗?这似乎是错误的.预先感谢您的帮助.

相关的小提琴是这里.

HTML:

<div ng-controller="myCtrl"><div my-directive>{{test.name}}</div>

JavaScript:

var myApp = angular.module('myApp', []);myApp.controller('myCtrl', function ($scope) {$scope.test = {name:"name", value:"value"};});myApp.directive("myDirective", function () {返回 {替换:真的，限制:'A'，范围:{测试:'='}，模板:'<div class="parent"><div>这是父Div.</div><div>Value={{test}}</div></div>',链接:函数(范围、元素、属性){console.log("scope.test=["+scope.test +"]");console.log("scope.$parent.test=["+scope.$parent.test.name+"]");}};});

解决方案

对于使用隔离作用域的指令，属性用于指定指令隔离子作用域需要访问哪些父作用域属性.'=' 提供双向绑定.'@' 提供单向字符串".'&'提供单向表达式.

要让您的指令(双向绑定)访问父作用域对象属性 test，请使用以下 HTML:

<div my-directive test="test"></div>

使用不同的名称可能更有启发性:

<div my-directive some-obj-prop="test"></div>

然后在您的指令中:

scope: { localDirProp: '=someObjProp'},模板:'<div ...>Value={{localDirProp}}...',

<小时>

隔离作用域通常不会从父作用域继承，因此它无法访问任何父作用域的属性(除非使用了@"或="或&").使用 $parent 是一种仍然可以访问父作用域的方法，但不是通过原型继承.Angular 在作用域上创建了这个特殊的 $parent 属性.通常(即最佳实践)，不应使用它.

After reviewing AngularJS (and related) documentation and other stackoverflow questions regarding isolated scopes within directives, I'm still a little confused. Why can't I do a bi-directional binding between the parent scope and directive isolated scope, where the parent scope property is an object and not an attribute? Should I just use the desired property off scope.$parent? That seems wrong. Thanks in advance for your help.

The related fiddle is here.

HTML:

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <div my-directive>{{test.name}}</div>
    </div>
</div>

JavaScript:

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl', function ($scope) {
    $scope.test = {name:"name", value:"value"};
});

myApp.directive("myDirective", function () {
    return {
        replace: true,
        restrict: 'A',
        scope: {test: '='},
        template: '<div class="parent"><div>This is the parent Div.</div><div>Value={{test}}</div></div>',
        link: function (scope, element, attrs) {
            console.log("scope.test=["+scope.test +"]");
            console.log("scope.$parent.test=["+scope.$parent.test.name+"]");
        }
    };
});

解决方案

For directives using an isolate scope, attributes are used to specify which parent scope properties the directive isolate child scope will need access to. '=' provides two-way binding. '@' provides "one-way strings". '&' provides one-way expressions.

To give your directive (two-way binding) access to parent scope object property test, use this HTML:

<div my-directive test="test"></div>

It might be more instructive to use different names:

<div my-directive some-obj-prop="test"></div>

Then in your directive:

scope: { localDirProp: '=someObjProp'},
template: '<div ...>Value={{localDirProp}}...',

---

Isolate scopes do not prototypically inherit from the parent scope, so it does not have access to any of the parent scope's properties (unless '@' or '=' or '&' are used). Using $parent is a way to still access the parent scope, but not via prototypical inheritance. Angular creates this special $parent property on scopes. Normally (i.e. best practice), it should not be used.

这篇关于如何将复杂属性从父作用域继承到指令的独立作用域的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！