Angular-将$ scope函数传递给指令

Question

I'm passing a controller $scope function to a directive through an html attribute, but for some reason the directive thinks that the function is a string. Any hints?

HTML

<modal show='createCustomer' create-new-customer='createNewCustomer()'></modal>

Directive

function modalDialog() {
  return {
    restrict: 'AE',
    scope:{
      createNewCustomer: '&'
    },
    replace: true,
    transclude: true,
    link: function(scope, element, attrs) {
      scope.createNewCustomer = attrs.createNewCustomer;
      console.log(typeof scope.createNewCustomer)
    },
    templateUrl: "./views/directive_templates/modal.html"
  };
}

$scope function

 $scope.createNewCustomer = function(){
    alert('yo')
  }

Best, Austin

Answer 1

Your code should be:

<modal show='createCustomer' create-new-customer='createNewCustomer'></modal>

It is most likely invoking the function immediately and passing in the result

Answer 2

In your directive, you already have scope.createNewCustomer bound to the function, through the use of the & parameter in your isolate scope. However, you actually overwrite the function with the string value when you re-assign it through the attrs . attrs is simply an array of key value pairs that are the string representation of each attribute in the element.

Answer 3

AngularJs directive lets you to use '&' method in scope with 2 ways.First way lets you to pass argument inside your isolated directive.Second one lets you to pass arguments outside of directive but to call INSIDE ISOLATED DIRECTIVE.Like

<div my-dir func="myFunc(arg1,arg2,..)"></div>
<div my-dir func="myFunc(value1,value2,..)"></div>

If you want more here is a cool article with examples:

http://www.w3docs.com/snippets/angularjs/angularjs-directive-scope-method.html