web-dev-qa-db-ja.com

AngularJS:ディレクティブの縮小問題

縮小に関してもう1つ問題があります。今回は、ディレクティブのコントローラーに渡された$ scopeサービスが原因です。以下のコードを参照してください:

angular.module('person.directives').
directive("person", ['$dialog', function($dialog) {
return {
    restrict: "E",
    templateUrl: "person/views/person.html",
    replace: true,
    scope: {
        myPerson: '='
    },     
    controller: function ($scope)
    {                   
        $scope.test = 3;                   
    }
}
}]);

コントローラー部分をコメントアウトすると、正常に動作します。

ご覧のとおり、私はディレクティブの配列宣言を使用したので、$ dialogサービスはAngular縮小後にもわかります。しかし、$ scopeに対してどのように行うべきですか?コントローラのサービス?

32
Sam

次のようにコントローラを宣言する必要があります。

controller: ['$scope', function ($scope)
    {                   
        $scope.test = 3;                   
    }]

ここに完全な例:

angular.module('person.directives').
directive("person", ['$dialog', function($dialog) {
return {
    restrict: "E",
    templateUrl: "person/views/person.html",
    replace: true,
    scope: {
        myPerson: '='
    },     
    controller: ['$scope', function ($scope)
    {                   
        $scope.test = 3;                   
    }]
}
}]);

@Samが提供するソリューションは機能しますが、ディレクティブのコントローラーをアプリケーション全体に公開する必要があるため、不要です。

75

さて、私は別のファイルでコントローラを作成しました:

angular.module('person.controllers').controller('personCtrl', ['$scope', function ($scope) {
$scope.test = 3;
}]);

次に、ディレクティブで、コントローラーを名前で割り当てます。

controller: 'personCtrl'

それが最善の方法かどうかはわかりません。それもきれいに見えます。どう思いますか ?

1
Sam