Question

所以我有一个控制器和指令。我无法理解为什么我的控制器在我的指令后运行。我已经搜索堆栈试图找到答案，但似乎大多数答案都是个案基础。

我的控制器最简单的形式就是这样

app.controller('MyCtrl', ['$scope', function ($scope){
$scope.initAddress = {
    place_id: "",
    geometry: {
        location: {
            A: "",
            F: ""
        }
    },
}
$scope.gotoLocation = function (placeId) {
                   $scope.initAddress = {
                       place_id: "placeId",
                       geometry: {
                           location: {
                               A: placeId.geometry.location.lat(),
                               F: placeId.geometry.location.lng()
                           }
                       }
}};}]);

当我点击我的ng-click按钮时，我将转到gotoLocation范围函数并重新定义$ scope.initAddress。我的HTML如下：

<div class="row">
<my-map address="initAddress"></my-map>
</div>
<div ng-repeat="place in placelistData.placeList">
    <button ng-click="gotoLocation(place.id)">{{place.id}}</button>
</div>

现在，当我查看我的指令时，我正在使用

 .directive('myMap', function () {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            address: '=?',
        },
        template: '<div class="dp-places-map-wrapper"><input type="text" class="dp-places-map-input"><div class="dp-places-map-canvas"></div></div>',

        link: function (scope, element, attrs) {
scope.$watch('address', function () {
   if (map && scope.address)
   map.setCenter(getLocation(scope.address));
 });
 }

现在，当我点击按钮时，它会运行到控制器和$ scopes.initAddress并且没有命中$ scope.watch。当我再次点击它时，它首先命中$ scope.watch，然后它进入我的控制器并相应地更新。如何更改它以便它先命中控制器，然后$ scope.watch捕获控制器中的更改。而不是先运行$ scope.watch然后运行控制器。

感谢您的帮助

Answer 1

了解为什么控制器在我的指令之后运行。

根据angular $ compile阶段，总是在控制器之前使用深度优先遍历算法调用指令。

原因是，指令是一个可重用的组件。因此必须在调用控制器之前对其进行实例化。

e.g。你的HTML可能看起来像这样

<body ng-app="demo">
<div ng-controller="controller1">
     <my-map address="initAddress"></my-map>
</div>
<div ng-controller="controller2">
    <my-map address="initAddress"></my-map>   
</div>
<div ng-controller="controller3">
<my-map address="initAddress"></my-map>
 </div></body>

这里initAddress将是相应控制器“controller1”，“controller2”和“controller3”中的范围变量。因此，总是使用深度优先遍历算法在控制器之前调用指令。

这是指令的生命周期

指令实例化
调用外部控制器，声明哪个指令。
调用指令内定义的控制器。
调用预定义链接（如果已定义）。
调用postlink if if 注意：如果定义的链接函数始终是postlink函数。如果声明了编译函数，则永远不会调用链接函数。

请参阅帖子了解更多详情。 http://yogeshtutorials.blogspot.in/2015/12/angularjs-directive-lifecycle.html

Answer 2

当AngularJS编译DOM时，它以深度优先，自上而下的方式遍历DOM树。当它沿着DOM走下去时，它会实例化指令控制器。然后，当它到达本地DOM树分支的底部时，它会在向上走回分支时以自下而上的方式开始链接指令。这并不意味着所有指令控制器都在所有指令链接之前运行;它只是意味着在本地DOM分支中，指令控制器在链接之前被实例化。

因此，在您的情况下，$scope.initAddress = {...}首先被击中。您是否尝试过初始化链接功能中的地址？

指令范围。$ watch在控制器功能之后调用

2 个答案: