如何将值传递给 AngularJs 中的指令？答案

【问题标题】：How do you pass a value to a directive in AngularJs?如何将值传递给 AngularJs 中的指令？
【发布时间】：2014-06-10 01:30:17
【问题描述】：

如何将值传递给指令并在模板中显示？

http://plnkr.co/edit/1uFEBi?p=preview

最终，我正在创建一个允许用户创建、编辑和删除内容的应用程序。我需要能够传递事物的 id 才能使其正常工作。我不确定这样做的角度方式是什么。 plunk 是我的尝试，但它不起作用。

非常感谢任何帮助。谢谢。

【问题讨论】：

属性值被正确传递，正如下面 Sai 提到的，您只需要更改绑定即可。 AngularJS 将破折号替换为驼峰式。此外，正如您所知，指令可以通过link 或compile 方法直接访问与指令关联的元素上的所有属性

标签： angularjs angularjs-directive

【解决方案1】：

给你： http://plnkr.co/edit/i5FPqeDuCtTK5zqINtsV?p=preview

你输出错误的东西应该是 {{lrBlockId}}

【讨论】：

我目前正在使用 ng-repeat 来输出块。
不起作用，但

【解决方案2】：

在模板中更改以下内容

<script type="text/ng-template" id="select-block-type.html">
  <p>Block Id = **{{lrBlockId}}**</p>
</script>

【讨论】：

【解决方案3】：

我没有在实际的 plunker 中看到模板。但是，我认为它有问题，因为找不到模板。这是一个更新的plunker 有效。

我使用一些JavaScript magic 来创建指令模板的动态路径：

var scripts = document.getElementsByTagName("script");
var currentScriptPath = scripts[scripts.length-1].src;

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

app.controller("MainController", function($scope){});

app.directive('selectBlock', function(){
    return {
        scope: {
            lrBlockId: '='
        },
        templateUrl: currentScriptPath.substring(0, currentScriptPath.lastIndexOf('/') + 1) + 'select-block-type.html',
    };
});

我还添加了一个 select-block-type.html 文件：

Template

{{lrBlockId}}

我没有注意到内嵌模板。在这种情况下，只需 modify it 就像我在上面所做的那样，删除要输出的变量中的“-”：

<script type="text/ng-template" id="select-block-type.html">
  <p>Block Id = {{lrBlockId}}</p>
</script>

【讨论】：

模板使用 index.html 页面中的<script type="text/ng-template" id="select-block-type.html"></script> 正常工作
我以前没有见过像这样内联定义的模板；很酷。问题是用户试图在模板中输出什么；如果在线创建，我修改后的模板也可以使用。