AngularJS - Контроллер один скомпилировал директиву

Question

Как следует из названия, в чем разница? Контроллер должен выступать в качестве конструктора - для создания всех переменных и/или для вызова API.

Контроллер директивы также работает до того, как DOM скомпилирован, и поэтому мне интересно, можно ли его использовать для некоторого контекста? Другими словами, эти два кода одинаковы?

Говорят, что у меня есть этот код:

<div my-div ng-controller="DivController"> 

Вот является Javascript:

angular 
    .module('myApp') 
    .controller('DivController', function($scope) { 
     $scope.value = 'initialize'; 
    }) 
    .directive('myDiv', function() { 
     return { 
      restrict: 'EA', 
      link: function(scope, element, attrs) { 
       // Now use $scope.value 
      } 
     } 
    }); 

// VS this code 

angular 
    .module('myApp') 
    .directive('myDiv', function() { 
     return { 
      restrict: 'EA', 
      controller: function($scope) { 
       $scope.value = 'initialize'; 
      }, 
      link: function(scope, element, attrs) { 
       // Now use $scope.value 
      } 
     } 
    }); 

Answer 1

Да и нет !!

Да потому, что:

• как выполняются предварительной компиляции
• в этом случае, они производят тот же конечный результат

Нет, потому что:

• обычно директиву не имеет собственного объема, если не указано иное.
• ng-controller имеет собственную область действия и может получить доступ к своей родительской области.
• контроллер директивы совместно используются всеми например директивы (очевидно)
• связанных контроллеры директивы (директивы, которые «требуют» другие) может взаимодействовать

---

Это очень важно, потому что это может привести к некоторые странные результаты. Например, проверить этот фрагмент кода (fiddle)

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

 
app.directive('myDiv', ['$http', 
 
    function($http) { 
 
    return { 
 
     restrict: 'EA', 
 
     controller: function($scope) { 
 
     $scope.value = 'directive'; 
 
     }, 
 
     link: function(scope, element, attrs) {} 
 
    }; 
 
    } 
 
]); 
 
app.controller('parentCtrl', function($scope) { 
 
    $scope.value = 'Parent Controller'; 
 
    $scope.parentvalue = 'wow parent value'; 
 
}); 
 
app.controller('DivController', function($scope) { 
 
    $scope.value = 'controller'; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="parentCtrl"> 
 
    <h1>parent scope</h1> 
 
    <br/>parentvalue: <b>{{parentvalue}}</b> 
 
    <br/>value: <b>{{value}}</b> 
 
    <br/>ajaxvalue: <b>{{ajaxvalue}}</b> 
 
    <br/> 
 
    <hr/> 
 
    <div my-div ng-controller="DivController"> 
 
     <h1>Controller and directive</h1> 
 
     <br/>parentvalue: <b>{{parentvalue}}</b> 
 
     <br/>value: <b>{{value}}</b> 
 
     <br/>ajaxvalue: <b>{{ajaxvalue}}</b> 
 
     <br/> 
 
    </div> 
 
    <hr/> 
 
    <div my-div> 
 
     <h1>Directive only</h1> 
 
     parentvalue: <b>{{parentvalue}}</b> 
 
     <br/>value: <b>{{value}}</b> 
 
     <br/>ajaxvalue: <b>{{ajaxvalue}}</b> 
 
     <br/> 
 
    </div> 
 
    </div>

Как вы видите директиву перезаписать $scope.value из его родителей и родного брата. Однако, если вы запустите асинхронный вызов и измените родителя $scope.value, значение будет заменено в директиве, но не в дочерней директиве.

Очевидно, вы можете создать изолированную область действия для этой директивы.