添加指令指令编程里面 [英] Adding directive inside the directive programatically
问题描述
我想我的指令的另一个实例追加到父的指令,但我不能用$申请重新编译我的指令。
I want to append another instance of my directive into the parent directive but i can't use $apply to recompile my directive.
我想我错过了什么这里的某个地方:)
I think i miss something here somewhere :)
我的HTML code
<div ng-app="TestApp">
<div ng-controller="TestCtrl">
<input ng-model="NewData" />
<button ng-click="AddNewData($event)">Add New</button>
<br /><br />
<div test-collector="testColScope" id="testCol">
<div test-data="" xx-value="Mouse" xx-href="https://fb.com"></div>
<div test-data="" xx-value="Keyboard" xx-href="https://goo.gl"></div>
</div>
</div>
</div>
我的JavaScript code
var app = angular.module('TestApp', []);
app.controller('TestCtrl', ['$scope', function($scope){
$scope.AddNewData = function($event){
// i also want to access this but it shows undefined
console.log("test-collector", $scope.testColScope);
var div = $('<div></div>')
.attr(
{
"test-data":"",
"xx-value":$scope.NewData,
"xx-href":"http://p.com"
});
//$scope.$apply(function(){
$('#testCol').append(div);
//});
};
}]);
app.directive("testCollector", function () {
return {
restrict: "A",
scope: {
},
transclude: true,
replace: true,
controller: function($scope) {
console.log($scope);
},
link: function(scope, element, attrs) {
console.log(attrs);
scope[attrs.testCollector] = {
Enteng : 'Dagpin'
};
},
template: '<div>' +
'<ul><div ng-transclude></div></ul>' +
'</div>'
}
});
app.directive("testData", function(){
return {
restrict: "A",
require: '^testCollector',
transclude: true,
replace: true,
scope: {
xxValue: '@',
xxHref: "@"
},
template: '<li><a href="{{xxHref}}">{{xxValue}}</a></li>'
}
});
下面是拨弄问题
推荐答案
要了解角新元素已经插入你需要使用像 $编译
服务第一编译元素 $编译(DIV)($范围)
那么只有你可以附加在角DOM该元素。
To understand angular new element has been inserted you need to first compile that element using $compile
service like $compile(div)($scope)
then only you can append that element in Angular DOM.
和您的指令已经上呈现的HTML,所以在div结构发生变化。
And you directive has already rendered on html, so the div structure is changed.
而不是做$('#testCol')使用 angular.element('#testCol UL DIV')
instead of doing $('#testCol') use angular.element('#testCol ul div')
下面是工作小提琴
更新1
根据@enzey DOM操作不应该内部控制完成。应该内部指令来完成。这就是为什么@Vincent&安培;我在做小提琴的变化。
DOM操作的逻辑已经被移动到里面的指令。
As per @enzey DOM manipulation should not be done inside controller. It should be done inside directive. That's why @Vincent & I made the changes in fiddle. DOM manipulation logic has been moved to inside directive.
下面是更新小提琴
这篇关于添加指令指令编程里面的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!