6

end()ディレクティブからコントローラーのメソッドに引数を渡すにはどうすればよいですか?

指令

var fileuploader = function () {
    return {
        restrict: 'E',
        scope: {
            onEnd: '&',
        },
        controller: function ($scope) {
            // When upload is done
            $scope.onEnd(/* file */);
        }
    };
}

コントローラ

module.controller('Ctrl', function ($scope) {
    $scope.end = function (file) {
        console.log('file', file);
    };
});

テンプレート：

<div ng-controller='Ctrl'>
    <fileuploader on-end='end()'></fileuploader>
</div>

また、これが他の場所で使用されているのを見ないので、これが角度のある方法なのだろうかと思います。たぶん、以下はより角度がありますか？

指令

var fileuploader = function () {
    return {
        restrict: 'E',
        scope: {
            onEnd: '=',
        },
        controller: function ($scope) {
            // When upload is done
            $scope.file = file;
        }
    };
}

コントローラ

module.controller('Ctrl', function ($scope) {
    $scope.$watch('file', function (val) {
        console.log('file', val);
    });
});

テンプレート

<div ng-controller='Ctrl'>
    <fileuploader on-end='file'></fileuploader>
</div>

ただし、これにより間接性が追加され、コントローラーメソッドの呼び出しよりも前向きではない可能性があります。

4

1 に答える 1

7

ここに例を示します。私の説明が明確でない場合はお詫び申し上げます: http://plnkr.co/edit/3wO3So

意見：

   <div ng-controller='fooCtrl'>
        <fileuploader directive-end-fn='end(directiveData)'></fileuploader>
    </div>

コントローラーとディレクティブ

app.controller('fooCtrl', function($scope) {
   /// This end() function sits on the controller it will be passed data from the directive
   $scope.end = function (directiveData) {
        console.log("I'm in the controller " + directiveData);
  };
});

app.directive('fileuploader', function(){
  return {
    restrict: 'E',
    replace: true,
    scope: {
       /// I bind the end function from the controller to scope.directiveEndFn, 
       //I'll use it in the link function later
      directiveEndFn: '&',
    },
    /// I take your directive, add an input box as a model (model.input)
    template: '<div><input type="text" ng-model="model.input"><div>{{model.input}}</div></div>',
    /// Put your logic in the linking function, so it runs all the time.     
    link: function(scope,element){
        /// This could be any event, right now I'm watching the model.input for event changes. 
        //It fires a callback that allows me to do stuff when changes happen
        scope.$watch("model.input", function(myModelValue){
              // I use scope.directiveEndFn with an "Object Map", 
              // I tell it to use the model.input which is now assigned to myModelValue value, 
              // It's a $watch convention you can read more about, whatever gets "Watched" is
              // is the parameter of the callback.
              // The object map links myModelValue to DirectiveData
              // Look at the view, which passes this information,
              // from the directive to the controller - directive-end-fn='end(directiveData)'
              scope.directiveEndFn({directiveData: myModelValue});
        });
    }
  }
});

これは、これを行う方法についても非常に良い説明です。そこにはさらにいくつかのテクニックがあります！

また、 & を使用してスコープ補間を理解したい場合は、 this を表示してください。

于 2014-11-17T07:40:38.643 に答える