0

ディレクティブを介して動的コントローラー (ディレクティブの観点から実行時に認識される) にテンプレートを渡そうとしています。

このようなもの：

<my-dir ctrl="PersonCtrl">  
    <h1>{{person.name}} - {{person.age}}</h1>
</my-dir>

var data = {
    name: "Alex",
    age: "24"
};

function PersonCtrl($scope){
    $scope.person = data;        
}

myApp.directive('myDir', function($controller){
    return {
        restrict: "EA",
        scope: {
            ctrl: "@"
        },
        transclude: true,
        controller: function($scope, $element, $attrs) {

        },
        template: "<div>{{ctrl}}</div><div ng-transclude></div>",
        link: function($scope, $element, $attrs) {
            $controller($attrs.foo, {$scope: {}});
        }
    };
});

jsFiddle を参照してください

コントローラーが見つかり、インスタンス化されますが、どういうわけか、トランスクルードされたテンプレートのコントローラーへのバインディングが機能しません。いくつかの注文要件を見逃していますか、またはこのコントローラーのスコープをトランスクルードされたテンプレートにバインドする方法はありますか?

4

1 に答える 1

0

見つかりました - コントローラを $$nextSibling スコープにバインドする必要がありました!

$controller($attrs.ctrl, {$scope: $scope.$$nextSibling});

更新されたjsFiddle

于 2013-10-22T22:37:47.543 に答える