Question

我创建了一个具有独立范围的指令。不知何故，当我尝试从指令的元素中获取范围时，它给出了控制器的范围，而不是孤立的范围。

我的代码出了什么问题？谁能解释scope（）方法是如何工作的？

这是我的js代码：

angular.module('myApp',[])
    .directive('component',function(){
        return {
            restrict:'EA',
            replace:false,
            scope:{
                "model":"="
            },
            template:'<div>{{model.name}}</div>',
            link:function($scope,element,attrs){
                element.bind('click',function(event){
                    console.log("element scope id->", element.scope().$id );
                });
            }
        };
    })
    .controller('AppCtrl',function($scope){
        $scope.myModel = {
            name:"Click me, to see scope's id in console"
        };
        console.log("controller scope id->", $scope.$id);
    });

和标记：

 <div ng-app="myApp" ng-controller="AppCtrl">
    <component selectable model="myModel"></component>
 </div>

DEMO is here

Answer 1

您需要更改此行：

console.log("element scope id->", element.scope().$id );

对此：

console.log("element scope id->", $scope().$id );

如果你想从元素中获取范围，请执行以下操作：

console.log("element scope id->", element.isolateScope().$id );

注意对isolateScope的调用。见https://docs.angularjs.org/api/ng/function/angular.element#methods

Answer 2

在您的指令中，您通过创建自己的范围对象范围来创建私有范围：{model：＆＃39; =＆＃39;} 。这就是为什么element.scope（）实际上是它的父母范围。

以下是一些事实：

指令＆$ 39; $ scope（）。$ parent = element.scope（）
父母无法访问儿童的范围。虽然有一些像element.scope（）。$$ childHead这样的工作，但它不推荐，并且它不会一直有效。
要与父对象进行通信，您可以使用来自父级的$ scope（）。$ broadcast（＆＃39; event-name＆＃39;，param1，param2），并使用$ scope。$ on来捕获来自子级的事件。（＆＃39; event-name＆＃39;，function（$ parentScope，param1，param2）{...}）
您可以使用$ scope（）。$ parent.methodName（）直接调用父方法或访问父模型，或使用$ scope（）等事件触发，从子节点传递给父节点。 $ emit（＆＃39; event-name＆＃39;，param1，param2），并使用$ scope。$ on（＆＃39; event-name＆＃39;，function（$ childScope，param1，参数2）{...}）

希望这会有所帮助。

scope（）方法如何在Angular JS中工作？

2 个答案: