インラインコントローラで定義されているディレクティブから関数を到達する方法

Question

directiveを持っている場合は、それ自身のcontrollerがそのボディに定義されています。

directives.directive("formWrapper", ['User','$location',  function(User, $location) {

    return {
       ...
       template: '<div>' +
                   '<input ng-click="cancel()" type="button" value="Cancel"/>' +
                   '<input ng-click="save()" type="button" value="Save" />' +
                  '</div>',

       controller: function($scope, $location, User) {

            $scope.fields = User.get( {username: "username"}  );

            var save = function() {...}

            var cancel = function() {...}          
        }
    }
}]);

.

templateセクションでは、コントローラで定義されているsave()とcancel()にアクセスしようとしています。

今のところ、それらのボタンをクリックすることはできません。

save()にcancel()と$scopeを定義したくない このディレクティブだけがそれらを使用することになっているからです。あるいは多分それ それらを$scopeにいるようにしても大丈夫ですか？それについてはわからない 絶縁

q：どうすれば私はそれを達成できますか？それに関する一般的な解決策/ビジョン？

Answer 1

テンプレートがそれらを見ることができるように、save()とcancel()をディレクティブのスコープに入れる必要があります（現在はコントローラ機能内でのみ表示されているだけです）。

だから：

var save = function() {...}
var cancel = function() {...}  

.

が欲しい

$scope.save = function() {...}
$scope.cancel = function() {...}  

.

これらが指令範囲にあることは問題ありません。Globalの$rootScopeにそれらを入れるのは好きではありません。

あなたはこれをあなたの指令に追加しました：

scope: {},

.

この$scopeは、このディレクティブだけに制限されています（AKA「絶縁範囲」）。そのため、オブジェクトや関数のスコープのようにこれを考えることができます - あなたはグローバルネームスペースを汚染していない。

これはデモです： http://jsfiddle.net/"> / 1/1/a>