角度范围函数参数返回未定义答案

【问题标题】：Angular scope function parameter return undefined角度范围函数参数返回未定义
【发布时间】：2016-08-24 14:58:32
【问题描述】：

我正在从指令中调用控制器函数，但是当我使用 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>

【问题讨论】：

在运行时使用 chrome 调试工具检查 thumbProductId 的值。或者干脆注销正在传入的 thumbProductId
这个问题是指令外部模板没有返回数据。如果我将值放在自定义指令元素上，它可以工作，但在 html 内部不起作用。
现在工作！这就是我需要的。 stackoverflow.com/questions/13318726/…

标签： angularjs angularjs-directive angularjs-scope angular-controller

【解决方案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: "&"
    }
  };  
}]);

【讨论】：

是的，演示效果很好。我仍然不确定。该模板实际上来自外部文件，因此我不能在 html 中使用斜杠。我猜可能是我变得不确定的原因。
当我把值放在指令元素上，就像你有它一样，但是如果你有需要访问值的指令内的 html 代码怎么办？我需要获取指令内部的数据并返回给控制器。
你的意思是这样吗？现在我将文本框中的值传递给指令，在控制器中设置它的值，然后在 HTML 页面上呈现它：plnkr.co/edit/FYUGBfIPtrl6Q7GWd597?p=preview
不是这样的。指令可以使用外部 html 文件。该文件将包含数据。我想使用一个函数从外部 html 获取数据。指令中没有设置 html 模板，它只是调用文件 getmydirectivetemplate.html
您可以将 html 模板传递到指令中的“templateUrl”属性中。 HTML文件中变量的使用原理和我们刚才使用的模板是一样的。您是否在问如何将模板动态添加到指令中？如果是这样，这里有一个人这样做的例子：stackoverflow.com/a/37782407/5349719

【解决方案2】：

使用指令表达式绑定将局部值暴露给父作用域

要使用表达式绑定将数据从指令范围传递到父范围，请使用 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 表达式会将 thumbProductId 设置为 $id 公开的值，在本例中为 56。

要使用 local 调用父函数，只需将 Angular 表达式设为函数即可：

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

DEMO on PLNKR。

【讨论】：