如何调用指令 如果包含指令的元素是通过 angular 控制器动态添加的? [英] How directives are invoked If an element that contains a directive is added dynamically through an angular controller?
问题描述
在进行了一些搜索之后,我在这种不良做法中没有找到太多信息.假设我有一个行为类似的控制器(我知道它应该是一个指令,并且在控制器中我们从不进行 DOM 操作,但我很好奇..)
After doing some search I haven't found much information in this bad practice. Let's say I have a controller that behaves like that (I know it should have been a directive and that in controllers we never do DOM manipulation but I am curious..)
angular.module('app').controller('test', ['$scope',
function($scope) {
$scope.addElement = function() {
var input = document.createElement('input');
input.type = "text";
//directive
input.setAttribute("autosize","autosize");
input.setAttribute("ng-model","dummy");
//[ append code ]
input.focus();
}
}
]);
让我们假设我有一个通过 ng-click 触发 addElement() 的按钮.如何触发"现有的 autosize 指令以实际工作.相比之下,预先存在并具有 autosize 指令的输入元素工作正常.我也试过 $scope.apply(function() { });围绕创建输入元素的缩进代码并导致 TypeError: undefined is not a function :/
and let's assume that I have a button that triggers addElement() with ng-click. How the existing autosize directive will be "triggered" to actually work. In contrast input elements that preexist and have the autosize directive work fine. I also tried $scope.apply(function() { }); around the indented code that creates the input element and it causes TypeError: undefined is not a function :/
推荐答案
根据上面 Mohammad Shahrouri 的评论,我不得不在控制器中注入 $compile
依赖项,我不得不添加 $compile(input)($scope);
最后:
Based on Mohammad Shahrouri's comment above, I had to inject the $compile
dependency in the controller and I had to add $compile(input)($scope);
at the end:
angular.module('app').controller('test', ['$scope','$compile',
function($scope, $compile) {
$scope.addElement = function() {
var input = document.createElement('input');
input.type = "text";
//contains directive
input.setAttribute("autosize","autosize");
input.setAttribute("ng-model","dummy");
//[ append code ]
input.focus();
$compile(input)($scope);
}
}
]);
这篇关于如何调用指令 如果包含指令的元素是通过 angular 控制器动态添加的?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!