Angularjs错误:错误:[$ compile:ctreq]无法找到指令'testChildren'所需的控制器'testParent'

时间:2013-09-27 15:00:54

标签: angularjs directive

首先出现:angularjs 1.2 rc1

我需要两个指令:parent&孩子们,所以我使用 require:true ,但我遇到了一个问题:

Error: [$compile:ctreq] Controller 'testParent', required by directive 'testChildren', can't be found!
http://errors.angularjs.org/1.2.0-rc.2/$compile/ctreq?p0=testParent&p1=testChildren
    at http://127.0.0.1/static/lib/angular/1.2.0rc2/angular.js:78:12
    at getControllers (http://127.0.0.1/static/lib/angular/1.2.0rc2/angular.js:4981:19)
    at nodeLinkFn (http://127.0.0.1/static/lib/angular/1.2.0rc2/angular.js:5122:35)
    at compositeLinkFn (http://127.0.0.1/static/lib/angular/1.2.0rc2/angular.js:4640:15)
    at nodeLinkFn (http://127.0.0.1/static/lib/angular/1.2.0rc2/angular.js:5115:24)
    at compositeLinkFn (http://127.0.0.1/static/lib/angular/1.2.0rc2/angular.js:4640:15)
    at publicLinkFn (http://127.0.0.1/static/lib/angular/1.2.0rc2/angular.js:4549:30)
    at http://127.0.0.1/static/lib/angular/1.2.0rc2/angular-route.js:854:15
    at publicLinkFn (http://127.0.0.1/static/lib/angular/1.2.0rc2/angular.js:4548:29)
    at update (http://127.0.0.1/static/lib/angular/1.2.0rc2/angular-route.js:832:13) <div test-children=""> 

我的代码很简单(只需4次测试):

angular.module('app', [])


.directive('testParent', [function() {
    return {
        restrict: 'EA',

        link: function link(scope, element, attr) {
            element.addClass('abcdef')
        }
    }
}])

.directive('testChildren', [function() {
    return {
        restrict: 'EA',
        require: '^testParent',

        link: function(scope, element, attr) {
            // console.log(ctrl)
                // ctrl.setTest('It is test')
                element.append('inner text')
        }
    }
}])

谁能告诉我发生了什么?

1 个答案:

答案 0 :(得分:1)

父指令必须提供一个控制器,然后作为子项链接函数的可选第4个参数传入

angular.module('app', [])
.directive('testParent', [function() {
    return {
        restrict: 'EA',
        controller: function() { 
            //... must include a controller in parent 
            this.doSomething = () => {}
        }
    }
}])

.directive('testChildren', [function() {
    return {
        restrict: 'EA',
        require: '^testParent',

        link: function(scope, element, attr, parent) {
            parent.doSomething()
        }
    }
}])