指令链接功能没有运行,但模板,控制器,确实

时间:2017-04-28 18:16:48

标签: angularjs

我的指令有一个奇怪的问题。我的理解是link函数应该像构造函数那样立即运行。奇怪的是,我的指令除了link函数之外还在其他方面工作。我的controller函数正在运行,template正在替换DOM上的自定义元素标记。

查看

<div id="testApp" ng-app="testApp" ng-controller="testController">
 <sb-tokenized-filter on-search="onSearch();" search-query="searchQuery">
 </sb-tokenized-filter>
</div>  

在我看来,我在脚本标签中也有一个测试应用和测试控制器,如下所示

<script type="text/javascript">
(function () {
    'use strict';

    angular.module('testApp', ['tokenizedFilter']).controller('testController', ['$scope', function ($scope) {
        $scope.tokens = [];
        $scope.searchQuery = null;

        $scope.onSearch = function () {
            console.log("search selected", $scope.searchQuery, $scope.tokens);
        }
    }]);


    angular.element(document).ready(function () {
        var bootstrapTarget = document.getElementById('testApp');
        angular.bootstrap(angular.element(bootstrapTarget), ['testApp']);
    });
})();
</script>  

以下是我的指令

的精简版
(function() {
'use strict';
angular.module('tokenizedFilter', ['ui.bootstrap']).directive('sbTokenizedFilter', function($sce, $compile) {
    return {
        restrict: 'E',
        scope: {

            onSearch: '&onSearch',
            tokens: '=',
            searchQuery: '=searchQuery',
        },
        template: '<div class="row">...', //works, replaces the DOM element with what I have in here
        compile: function(element, attrs) {
            //stuff happening here
            //this works as well
        },
        link: function(scope, elem) {
            //this never outputs to the console :(
            //not working...
            console.log('in link');
        },
        controller: function($scope) {
            //this is hit and does output stuff to the console.
        }
    }
});
})();  

我确定这是我在这里失踪的一些小细节。我已经多次看到他们的指导视频,并且还阅读过有角度的文档,但是我不知道我在这里做错了什么。

为什么我的指令的每个功能似乎都起作用,除了链接功能?

1 个答案:

答案 0 :(得分:2)

引用the doc

  

链接

     

仅当未定义compile属性时才使用此属性。

您实际应该做的是让compile函数返回一个值:

  

返回(post-link)函数相当于注册   当通过配置对象的link属性链接函数时   compile函数为空。

     

返回通过prepost注册的功能的对象   属性允许您控制链接功能应该何时   在链接阶段调用。