Angularjs – 将parameter passing给指令
我想知道是否有办法将parameter passing给一个指令？
我想要做的就是像这样在控制器中添加一个指令：
$scope.title = "title"; $scope.title2 = "title2"; angular.element(document.getElementById('wrapper')).append('<directive_name></directive_name>'); 是否有可能在同一时间传递参数，以便我的指令模板的内容可以链接到一个或另一个范围？
这里是指令：
app.directive("directive_name", function(){ return { restrict:'E', transclude:true, template:'<div class="title"><h2>{{title}}</h3></div>', replace:true }; })
如果我想使用相同的指令，但是使用$ scope.title2，该怎么办？
您可以像使用内置的Angular-directive一样将parameter passing给您的自定义指令 – 通过在指令元素上指定一个属性：
angular.element(document.getElementById('wrapper')) .append('<directive-name title="title2"></directive-name>');
你需要做的是在你的指令的工厂函数中定义scope （包括参数/参数）。 在下面的例子中，该指令采用title参数。 然后，您可以使用它，例如在template ，使用常规的Angular方式： {{title}}
app.directive('directiveName', function(){ return { restrict:'E', scope: { title: '@' }, template:'<div class="title"><h2>{{title}}</h2></div>' }; });
根据你想要绑定的方式，你有不同的select：
-
=是双向绑定 -
@简单地读取值（单向绑定） -
&用于绑定函数
在某些情况下，您可能需要使用与“内部”名称不同的“外部”名称。 对于外部我的意思是指令元素和内部的属性名称我的意思是指令的范围内使用的variables的名称。
例如，如果我们看上面的指令，你可能不想为标题指定另一个额外的属性，即使你在内部想要使用title属性。 相反，你想要使用你的指令，如下所示：
<directive-name="title2"></directive-name>
这可以通过在作用域定义中的上述选项后面指定名称来实现：
scope: { title: '@directiveName' }
请注意以下几点：
- HTML5规范说，自定义属性（这基本上是在Angular应用程序中的所有地方）应该以
data-为前缀。 Angular通过从任何属性剥离data-前缀来支持这一点。 所以在上面的例子中，你可以指定元素的属性（data-title="title2"），内部的一切都是一样的。 - 元素上的属性总是以
<div data-my-attribute="..." />在代码中（例如作用域对象上的属性），它们的forms是myAttribute。 我意识到这一点之前，我失去了很多时间。 - 另一种在不同的Angular组件（控制器，指令）之间交换/共享数据的方法，你可能想看看服务或指令控制器。
- 您可以在Angular主页上find更多信息（指令）
你可以尝试如下：
app.directive("directive_name", function(){ return { restrict:'E', transclude:true, template:'<div class="title"><h2>{{title}}</h3></div>', scope:{ accept:"=" }, replace:true }; })
它在'accept'属性的值和父范围之间build立一个双向绑定。
还可以设置两种方式与属性绑定：'='
例如，如果你想把key和value绑定到本地范围，你可以这样做：
scope:{ key:'=', value:'=' },
有关更多信息， 请参阅https://docs.angularjs.org/guide/directive
所以，如果你想从控制器传递参数到指令，那么请参考下面的小提琴
http://jsfiddle.net/jaimem/y85Ft/7/
希望能帮助到你..
这是我如何解决我的问题：
指示
app.directive("directive_name", function(){ return { restrict: 'E', transclude: true, template: function(elem, attr){ return '<div><h2>{{'+attr.scope+'}}</h2></div>'; }, replace: true }; })
调节器
$scope.building = function(data){ var chart = angular.element(document.createElement('directive_name')); chart.attr('scope', data); $compile(chart)($scope); angular.element(document.getElementById('wrapper')).append(chart); }
我现在可以通过相同的指令使用不同的范围，并dynamic追加它们。
