指令不工作的时候我该版本的角度来为1.0.1 1.2.27 [英] Directive doesn't work when I which the version of Angular to 1.0.1 to 1.2.27

问题描述

以下可在演示这里运行。

这是HTML：

＆LT; D​​IV NG控制器=MyCtrl＆GT;
    ＆LT; H2＆GT;父范围＆LT; / H＆GT;
    ＆LT;输入NG模型=foo的＆GT; ＆LT; I＆GT; //更新，看看怎样的范围与父组件范围＆LT相互作用; I＆GT /;结果
    ＆LT; BR＆GT;＆LT; BR＆GT;
    ＆LT;！ - 属性 - 美孚结合DOM属性始终是
    字符串。这就是为什么我们在大括号包裹它，
    它可以被内插。
     - ＆GT;
    ＆LT;我的组件属性富={{富}}绑定富=富
        隔离-EX pression-富=updateFoo（newFoo）＆GT;
        ＆LT; H2＆GT;属性与LT; / H＆GT;
        ＆LT; D​​IV＆GT;
            ＆LT;强＆GT;获得：其中; / STRONG＆GT; {{isolatedAttributeFoo}}
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV＆GT;
            ＆LT;强＆GT;设置：其中; / STRONG＆GT; ＆LT;输入NG模型=isolatedAttributeFoo＆GT;
            ＆LT; I＆GT; //这不更新父范围＆LT; / I＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; H2＆GT;装订＆LT; / H＆GT;
        ＆LT; D​​IV＆GT;
            ＆LT;强＆GT;获得：其中; / STRONG＆GT; {{isolatedBindingFoo}}
        ＆LT; / DIV＆GT;
        ＆LT; D​​IV＆GT;
            ＆LT;强＆GT;设置：其中; / STRONG＆GT; ＆LT;输入NG模型=isolatedBindingFoo＆GT;
            ＆LT;我方式＆gt; //这确实更新父范围＆LT; / I＆GT;
        ＆LT; / DIV＆GT;
        ＆LT; H2＆GT;防爆pression＆LT; / H＆GT;结果
        ＆LT; D​​IV＆GT;
            ＆LT;输入NG模型=isolatedFoo＆GT;
            ＆LT;按钮类=BTNNG点击=isolatedEx pressionFoo（{newFoo：isolatedFoo}）＆GT;提交＆LT; /按钮＆GT;
            ＆LT;我方式＆gt; //这就要求对父范围的函数与LT; / I＆GT;
        ＆LT; / DIV＆GT;
    ＆LT; /我-成分＆gt;
＆LT; / DIV＆GT;

这是JS：

var myModule = angular.module('myModule', [])
.directive('myComponent', function () {
    return {
        restrict:'E',
        scope:{
            /* NOTE: Normally I would set my attributes and bindings
            to be the same name but I wanted to delineate between 
            parent and isolated scope. */                
            isolatedAttributeFoo:'@attributeFoo',
            isolatedBindingFoo:'=bindingFoo',
            isolatedExpressionFoo:'&'
        }        
    };
})
.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.foo = 'Hello!';
    $scope.updateFoo = function (newFoo) {
        $scope.foo = newFoo;
    }
}]);

＆NBSP;＆NBSP;这应该是三类范围在directives.However绑定一个很好的例子，它只是当我尝试切换一个更高的角度版本不起作用 - （1.2.27）。我怀疑指令中继承范围的影子，但我不知道这一点。

  This should be a good example for three kinds of scope binding in directives.However, it just doesn't work when I try to switch a higher angular version - (1.2.27). I suspect the shadow of the inherited scope within the directive, but I'm not sure of it.

推荐答案

这是行不通的，你期望的方式。隔离作用域创建并提供给链接，编译和模板 A指令的部分。但是，元素本身的HTML实际上不是指令的一部分。这些HTML部分还在绑定到父 $范围。如果你有一种倾向命名您的隔离范围的对象一样，你可能只是工作对 $范围无意和没有发现任何不良影响。如果你的HTML是在模板，而不是里面的元素，它会进入分离范围。

This isn't going to work the way you expect. Isolated Scopes are created and provided to the Link, Compile, and Template portions of a Directive. However, the HTML within the Element itself is not actually part of the Directive. Those HTML portions are still bound to the parent $scope. If you have a tendancy to name your isolated scope objects the same, you may have just been working against the $scope unintentionally and not noticed any ill effect. If your HTML was in a Template rather than inside the Element, it would access the isolate scope.

作为一个例子，在是内嵌在元素中的HTML ，你可以叫 updateFoo（），但是这是不可能从内部模板

As an example, in the HTML that is inline in the Element, you can call updateFoo(), but that would not be possible from inside a Template

这篇关于指令不工作的时候我该版本的角度来为1.0.1 1.2.27的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！