Как работает метод scope() в Angular JS?

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

В вашей директиве вы создали закрытый объект, создав собственный объект области видимости. scope: {model: '='}. Вот почему element.scope() на самом деле является областью родителя.

Вот несколько фактов:.

• директивы $ охват() $ Родитель = element.scope()
• Родитель не может получить доступ сферы ребенка. Хотя есть некоторые работы, такие как element.scope(). $$ childHead, но это не рекомендуется, и это не работает все время.
• Чтобы связать родительский с дочерним, вы можете использовать $ scope(). $ Broadcast ('event-name', param1, param2) из ​​родительского элемента и улавливать событие из дочернего объекта с помощью $ scope. $ On ('event-name ', function ($ parentScope, param1, param2) {...})
• Вы можете связываться от дочернего к родительскому, используя $ scope(). $ parent.methodName(), чтобы напрямую вызвать метод родителя или получить доступ к родительской модели или используя событие event, как $ scope(). $ emit ('event-name', param1, param2) и поймать событие от родителя с помощью $ scope. $ on ('event-name', function ($ childScope, param1, param2) {...})

Надеюсь, это поможет.