在执行控制器之前，让AngularJS编译指令和链接函数

由于我的程序的性质，我要求将函数放在作用域上，并在指令的链接函数和控制器之间共享，如下所示

.controller("controller", function($scope, $location, $timeout, model) {

    //irrelevant code

    $scope.addObject(draggables[i]);

};


.directive("designCanvas", function($timeout) {
    return {
        restrict: "A",
        link: function($scope, element) {

            $scope.addObject = function(draggable) {

                // irrelevant code
            }
        }
    }
}

当我进行此函数调用时，我得到“$scope.addObject不是函数”

我的问题是，控制器在angularJS评估link函数之前执行，因为当我使用$timeout将其延迟几秒钟时，函数调用工作正常

---

因此，我的问题是，如何才能首先获得要编译的链接函数的内容？

我将在控制器中创建侦听指令中某个标志的

$watch

比如：

.controller("controller", function($scope, $location, $timeout, model) {

    //irrelevant code
    $scope.flag = false; 

     $scope.$watch(function () {
        return $scope.flag;
    },
    function (newValue, oldValue) {
        if(newValue == true){
            $scope.addObject(draggables[i]);
         }
    }, true);


};


.directive("designCanvas", function($timeout) {
    return {
        restrict: "A",
        link: function($scope, element) {
            $scope.flag = true;
            $scope.addObject = function(draggable) {

                // irrelevant code
            }
        }
    }
}

这有点混乱，但我认为这是一个方向。相反，

$scope.flag

您可以尝试使用如下回调：

 .controller("controller", function($scope, $location, $timeout, model) {

     $scope.callback= function() {
       $scope.addObject(draggables[i]);
     }
    };

.directive("designCanvas", function($timeout) {
        return {
            restrict: "A",
            link: function($scope, element) {

                $scope.addObject = function(draggable) {

                  // ....

                  $scope.callback();
                }
            }
        }
    }

---

希望能有所帮助，

我建议将此函数作为服务编写，并将服务注入指令和控制器中共享功能应作为服务实现

.factory("objectService",function(){
    return {
       addObject : function (draggable){
          //your code of this function
       }
    };
});

.controller("controller", function($scope, $location, $timeout, model,objectService) {

    //irrelevant code

    $scope.addObject = function (draggable){
        objectService.addObject(draggable); //reuse this function
       //objectService.addObject.call($scope,draggable) if you want to call this function with $scope as the context.
    };
};

.directive("designCanvas", function($timeout,objectService) {
    return {
        restrict: "A",
        link: function($scope, element) {
            $scope.addObject = function(draggable) {
                objectService.addObject(draggable); //reuse this function.
                //objectService.addObject.call($scope,draggable) if you want to call this function with $scope as the context.

                //write more logic specific to this function, like modifying link's local data.
            }
        }
    }
}

---

我将创建另一个指令并使其依赖于

designCanvas

：

.directive("designCanvas", function() {
    return {
        controller: function() {
            this.addObject = function(draggable) {
                alert(draggable.name);
            }
        }
    }
})

.directive("draggable", function() {
    return {
        require: '^designCanvas',
        link: function(scope, element, attrs, designCanvasController) {
            designCanvasController.addObject(scope.item);
        }
    }
});

用法如下：

<div design-canvas>
    <div ng-repeat="item in draggables" draggable>{{item.name}}</div>     
</div>

{{item.name}

演示。

---

我认为，将指令与控制器绑定不是最好的主意。您应该使用服务或一个以上指令。

编译取决于HTML图形（DOM）。如果控制器是在指令的父级上定义的，则在链接发生之前，它将被实例化。为什么不能将addObject添加到控制器。或者检查

if（$scope.addObject）$scope.addObject（draggables[i]）感谢您的时间：）我在指令中使用easelJS来操作画布，其变量是链接函数的本地变量，因此无法在控制器中修改。我还尝试创建一些分离，并有一个更结构化的MVC格式。。如果（$scope.addObject）可以工作，但不太符合我的目的，因为我需要函数来执行regardlessThanks:）如果我需要addObject函数来修改链接函数中的变量，这将如何工作？@Tom Hadkiss:如果该逻辑仅特定于链接函数（控制器没有此逻辑）=>此逻辑不共享。您可以在
objectService.addObject（draggable）行下面编写它
@Tom Hadkiss：如果控制器和指令都有相同的逻辑=>此逻辑是共享的，则可以将更多参数传递给
objectService.addObject
，并将逻辑写入其中。该方法将只修改链接函数的局部变量，从而使其不共享。我不明白你写在下面是什么意思？写什么？谢谢again@TomHadkiss：在link函数中查看我的更新。希望现在更清楚