我怎么能继承父范围复杂属性到我的指令的隔离范围 [英] How can I inherit complex properties from the parent scope into my directive's isolated scope

问题描述

审查AngularJS（及相关）文件和有关指令中隔离范围计算器等问题之后，我还是有点困惑。为什么我不能做家长的范围和指令隔离范围，在父作用域属性是一个对象，而不是一个属性之间的双向绑定？如果我只是使用所需的属性了范围。$父？这似乎是错误的。在此先感谢您的帮助。

，相关小提琴是这里。

HTML

 ＆LT; D​​IV NG-应用=对myApp＆GT;
    ＆LT; D​​IV NG控制器=myCtrl＆GT;
        ＆LT; D​​IV我-指令＆GT; {{test.name}}＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
 

JavaScript的：

  VAR对myApp = angular.module（'对myApp'，[]）;myApp.controller（'myCtrl'，函数（$范围）{
    $ scope.test = {名：名称，值：值};
}）;myApp.directive（myDirective功能（）{
    返回{
        更换：真实，
        限制：'A'，
        适用范围：{测试：'='}，
        模板：'＆LT; D​​IV CLASS =父＆GT;＆LT; D​​IV＆gt;这是父事业部＆LT; / DIV＆GT;＆LT; D​​IV＆GT;值= {{测试}}＆LT; / DIV＆GT;＆LT; / DIV＆GT;' ，
        链接：功能（范围，元素，ATTRS）{
            的console.log（scope.test = [+ scope.test +]）;
            的console.log（范围$ parent.test = [+范围$ parent.test.name +]）;
        }
    };
}）;
 

解决方案

有关使用隔离范围，指令属性用于指定父作用域属性的指令隔离子范围将需要访问。 '='提供双向绑定。 @提供单向字符串。 '和;'提供单向前pressions。

要给你的指令（双向绑定）访问父范围对象的属性测试，使用HTML：

 ＆LT; D​​IV我-指令测试=测试＆GT;＆LT; / DIV＆GT;
 

这可能是更有益的使用不同的名称：

 ＆LT; D​​IV我指令性一些-OBJ-道具=测试＆GT;＆LT; / DIV＆GT;
 

然后在您的指令：

 范围：{localDirProp：'= someObjProp}，
模板：'＆LT; D​​IV ...＆GT;值= {{localDirProp}} ...'，
 

---

隔离范围不中典型从父范围继承，所以它不具有任何父范围的属性的访问（除非'@'或'='或'和;'被使用）。使用 $父是仍然可以访问父作用域的一种方式，而不是通过原型继承。角创建这个特殊的 $父的范围属性。通常（即，最佳的做法），它不应该被使用。

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