Question

我从指令调用控制器函数但是当我在console.log中检查值时，函数参数返回undefined。想知道我做错了什么或者我忘记了一步。我实际上硬编码了一个值，看看是否显示，但只是在控制台中未定义。注意：自定义指令模板来自外部文件，因此函数参数不会过去到控制器。它仅在自定义指令元素附加值时有效。应该使用内部指令html。

//********************  Directive  ********************//
app.directive('customdir', [function() {
  return {
    restrict:   "E",
    template : "<div>Get product<button ng-click="addToCart(56)">Add to Cart</button></div>",
    scope:      {    
      addToCart:"&"
    },
    link: function(scope, el, attrs) {

    }
  };  
}]);



//********************  Controller  ********************// 
app.controller('mycontroller', function($scope) {

 $scope.addToCart = function(thumbProductId){
     $scope.thumbProductId = thumbProductId;
     console.log("thumbProductId =" + $scope.thumbProductId); // Returns Undefined

    };
});



//********************  Html  ********************//
<html>
     <div ng-controller="mycontroller">
        <custom-dir add-to-cart="addToCart(thumbProductId)">  </custom-dir>

     </div>
  </html>

Answer 1

代码中有一些错误，第一个是“customdir”，它之间没有“ - ”，因为没有资本。您还需要转义html中的某些字符，例如引号和正斜杠。这是你的例子的一个傻瓜：

http://plnkr.co/edit/FYUGBfIPtrl6Q7GWd597?p=preview

该指令现在看起来：

myApp.directive('customdir', [function() {
  return {
    restrict:   "E",
    template : "<button ng-click=\"addToCart(thumbProductId)\">Add to Cart<\/button>",
    scope:      {    
      addToCart: "&"
    }
  };  
}]);

Answer 2

使用指令表达式绑定将本地值公开给父范围

要使用Expression Binding将数据从指令范围传递到父范围，请使用 locals 对象调用表达式。

myApp.directive('customdir', function() {
  return {
    restrict:   "E",
    template : "<button ng-click='addToCart({$id: 56})'>Add 56 to Cart</button>",
    scope:      {    
      addToCart: "&"
    }
  };  
});

上述指令调用由add-to-cart属性定义的角度表达式，其值56公开为$id。

HTML：

<div ng-controller="mycontroller">

    <customdir add-to-cart="thumbProductId =  $id">  </customdir>
    ThumbProductId => {{thumbProductId}}

</div>

当用户点击customdir元素中的按钮时，调用的Angular Expression会将thumbProductId设置为$id公开的值，在这种情况下为56

要使用本地调用父函数，只需将Angular Expression设为函数：

 <customdir add-to-cart="parentFn($id)">  </customdir>

DEMO on PLNKR。

角度范围函数参数返回undefined

2 个答案:

使用指令表达式绑定将本地值公开给父范围