我的指令有一个奇怪的问题。我的理解是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.
}
}
});
})();
我确定这是我在这里失踪的一些小细节。我已经多次看到他们的指导视频,并且还阅读过有角度的文档,但是我不知道我在这里做错了什么。
为什么我的指令的每个功能似乎都起作用,除了链接功能?
答案 0 :(得分:2)
引用the doc:
链接强>
仅当未定义
compile
属性时才使用此属性。
您实际应该做的是让compile
函数返回一个值:
返回(post-link)函数相当于注册 当通过配置对象的
link
属性链接函数时compile
函数为空。返回通过
pre
和post
注册的功能的对象 属性允许您控制链接功能应该何时 在链接阶段调用。