angularjs - 从指令将参数传递给父 Controller 方法

Question

我如何将参数传递给 end()指令中 Controller 的方法？

指令

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

Controller

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

模板:

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

我也想知道这是否是一种有 Angular 的做事方式，因为我没有看到它在其他任何地方使用过。也许以下更有棱 Angular ？

指令

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

Controller

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

模板

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

虽然这增加了一些间接性，并且可能不如调用 Controller 方法那么向前。

Answer 1

Aight先生，这是一个例子，如果我的解释不是很清楚，请道歉:
http://plnkr.co/edit/3wO3So

看法:

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

Controller 和指令

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 is a really good explanation on how to do this also. There are a couple more techniques there too!

另外，如果您想了解范围插值， using the &, view this .