1

ng-modelコントローラーを使用し、内部のコントローラー「myController」からモデル値を取得するディレクティブがあります。私はtransclude=trueとng-transcludeを使用しています。これは、同僚が再利用できるようにしたい汎用ディレクティブです。消費者がボタンをクリックできるようにしたいので、ngModel の値を必要な値に設定しますが、基本的には常に何らかのオブジェクトに設定します。それを正しく設定するにはどうすればよいですか？ディレクティブ内で ngModel.$setValue または $setViewValue などを呼び出すことができることに気づきました...申し訳ありませんが、angularjs、特にディレクティブはまだ初めてです。また、ディレクティブ内でコントローラーを使用する必要がありますか? ディレクティブのオブジェクト定義にその機能があることは知っていますが、それをいつどのように活用するかはよくわかりません。最後に、「nestedInDirController」のように、コントローラーをディレクティブに変換しても問題ありませんか? ? ヒント、トリック、例、またはアドバイスをありがとう。

ここでjsfiddle

<div ng-controller="myController">
    <div foo-directive="" ng-model="viewModel.foo">
        <div ng-controller="nestedInDirController">
           <various-controls-in-here />
        </div>
    </div>
 </div>

angular.module('myApp', [])
 .directive('fooDirective', function(){ 

    var template = '<div><div ng-transclude></div> <button ng-click="someFunc()">I want to update ng-model in the directive, which in turn will update myController $scope.viewModel.foo</button></div>';
   return {
      transclude: true,
      require: '?ngModel',
      template: template,
      compile: function(tElement, tAttrs, transclude){

         return function(scope, element, attrs, ngModel){

         }
      }
    };
 });

function myController($scope){

  $scope.viewModel = { foo : { bar: 'baz'}};   
 }

function nestedInDirController($scope){


  $scope.someFunc = function(){
      alert('I was called');
      //how can I set ng-model in foo-directive from this controller?
  }

}
4

2 に答える 2

2

これは、ディレクティブとコントローラーの間で共有サービスを使用する別のソリューションです。

(一般的な例ではなく、その特定のケースで必要なデータ構造をコントローラー間で共有するように強制する、より良いサービスを作成できます。)

ここにjsfiddle http://jsfiddle.net/PguFh/15/があります（以下のコードを書いた後に少し更新されました）。

index.html

<div ng-controller="myController">
    <div foo-directive="" ng-model="viewModel.foo">
        <div ng-controller="nestedInDirController">
            <pre>{{viewModel.foo|json}}</pre>
        </div>
    </div>
</div>

app.js

angular.module('myApp', [])

.factory('Shared', function() {
    var shared = {};

    return {
        set: function(value) {
            shared = value;
        },
        get: function() {
            return shared;   
       }
    }
})

.directive('fooDirective', function(Shared){ 

    var template = '<div><div ng-transclude></div> <button ng-click="shared.someFunc()">I want to update ng-model in the directive, which in turn will update myController $scope.viewModel.foo</button></div>';
    return {
        transclude: true,
        require: '?ngModel',
        template: template,
        compile: function(tElement, tAttrs, transclude){

            return function(scope, element, attrs, ngModel) {
                scope.shared = Shared.get();
            }
        }
    };
});

function myController($scope, Shared){

    $scope.viewModel = { foo : { bar: 'baz'}};  
    Shared.set({
        viewModel: $scope.viewModel,
        someFunc: function() { alert('default?'); }
    });
}

function nestedInDirController($scope, Shared){
    var shared = Shared.get();
    shared.someFunc = function(){
        alert('I was called');
        //how can I set ng-model in foo-directive from this controller?
        shared.viewModel.foo.bar = "baz.modified";
    }

}
于 2013-10-06T22:41:05.390 に答える
2

http://jsfiddle.net/jSEba/

これは、イベント発行を使用してニーズを満たす 1 つの方法です。

つまり、イベントへのディレクティブを$broadcastその子スコープに入れることで、トランスクルードされた子スコープが経由$onしてキャッチし、ボタンのクリックに反応できるようにします。

angular.module('myApp', [])
.directive('fooDirective', function(){ 
    var template = '<div><div ng-transclude></div> <button ng-click="someFunc()">I want to update ng-model in the directive, which in turn will update myController $scope.viewModel.foo</button></div>';
    return {
        transclude: true,
        template: template,
        link: function(scope, elem, attrs) {
            scope.someFunc = function() {
                scope.$broadcast('buttonclick', { valname: attrs.fooDirective });
            };
        }
    };
});

function myController($scope){
    $scope.viewModel = { foo : { bar: 'baz'}};   
}

function nestedInDirController($scope){
    $scope.$on('buttonclick', function(event, arg) {
        $scope.$eval( arg.valname + " = 'new value'");
    });
}

私はもっ​​と良い方法があるのではないかと疑っています。

于 2013-06-20T09:53:36.353 に答える