angularjs - 如何在 angularJs 自定义指令中将值作为属性传递

标签 angularjs attributes directive

我试图将一些值作为自定义指令中的属性传递并访问模板内,但值是空白的。

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  // $scope.temp = "temp123";

});

app.directive("dirName" , function(){


  return {
    template: "<div> temp = {{temp}} </div>",
    temp:'@',

  };



});
<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6908070e1c05081b47031a2958475d4711" rel="noreferrer noopener nofollow">[email protected]</a>" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js" data-semver="1.4.6"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    <dir-name temp="my value"></dir-name>
  </body>

</html>

这里是 plunker 链接: http://plnkr.co/edit/r95YGxS19cMvWMWZMPcN

请帮忙。

最佳答案

您需要定义指令的范围,然后temp将成为指令范围内的变量。

return {
    template: "<div> temp = {{temp}} </div>",
    scope: {
      temp:'@'
    }   
};

已更新Plunker

如果您需要将 MainCtrl 值绑定(bind)到指令,请使用 = 而不是 @,如 Plunker 所示。

还有另一个 (&) 指向 MainCtrl 中的函数。检查这个DOC

关于angularjs - 如何在 angularJs 自定义指令中将值作为属性传递,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32837233/

相关文章:

javascript - AngularJS:父范围未在指令中更新(具有隔离范围)双向绑定(bind)

javascript - 输入格式化指令

javascript - Angular JS : Set partial form field value?

javascript - 如何动态设置 Angular JS 页面的元标签以进行 Facebook 共享?

angularjs - 如何使用 angularjs 从另一个指令调用一个指令 Controller 函数

python - 为什么可以将属性添加到对象子类的实例,而不是对象的实例?

python - 在Python中分割outerHTML属性

css - 如何避免宽度计算,这可以只用 CSS 来完成吗?

javascript - Angular/ express : Redirecting to the last page visited after logging in

php - 如何在 Highcharts Javascript 库中的散点图点上添加额外标签?