Angular指令-找不到控制器指令

Question

Controller 'appLeft', required by directive 'appContent', can't be found!

//app-nav(left)
    app.directive('appLeft', function ()
    {
        return {
            restrict: 'E',
            replace: false,
            scope: {
                leftItem: "=leftItem"
            },
            controller:function($scope){
                this.title = $scope.leftItem;
            },
            templateUrl: 'res/tpl/app-left.html',
            link: function (scope, ele, attr)
            {
                scope.toggle=function(index){
                    scope.leftItem[index].isShow = !scope.leftItem[index].isShow;
                }
            }
        }
    });
    //app-content
    app.directive('appContent',function(){
        return {
            require:'^appLeft',
            restrict: 'E',
            replace:false,
            transclude:true,
            scope:{},
            templateUrl:'res/tpl/app-content.html',
            link:function(scope,ele,attr,appLeftCtrl){
                console.log(appLeftCtrl.title)
            }
        }
    });

Controller 'appLeft', required by directive 'appContent', can't be found!

Answer 1

make sure your required directive is outside of the child directive in the html DOM since the appLef directive is the parent directive.

<app-left>
     <app-content></app-content>
</app-left> 

According to Doc

When a directive uses require, $compile will throw an error unless the specified controller is found. The ^ prefix means that this directive searches for the controller on its parents (without the ^ prefix, the directive would look for the controller on just its own element).

Demo