Question

如何从指令传递参数到控制器的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>

这增加了一些间接性，并且可能比调用控制器方法更少。

Answer 1

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

查看：

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

控制器＆amp;指令

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。

从指令传递父控制器方法的参数

1 个答案: