以编程方式在指令中添加指令 [英] Adding directive inside the directive programatically
问题描述
我想将我的指令的另一个实例附加到父指令中,但我不能使用 $apply 重新编译我的指令.
我想我在这里某处想念一些东西:)
我的 HTML 代码
<div ng-controller="TestCtrl"><input ng-model="NewData"/><button ng-click="AddNewData($event)">新增</button><br/><br/><div test-collector="testColScope" id="testCol"><div test-data="" xx-value="鼠标" xx-href="https://fb.com"></div><div test-data="" xx-value="Keyboard" xx-href="https://goo.gl"></div>
我的 JavaScript 代码
var app = angular.module('TestApp', []);app.controller('TestCtrl', ['$scope', function($scope){$scope.AddNewData = function($event){//我也想访问它,但它显示未定义console.log("test-collector", $scope.testColScope);var div = $('<div></div>').attr({测试数据":"","xx-value":$scope.NewData,"xx-href":"http://p.com"});//$scope.$apply(function(){$('#testCol').append(div);//});};}]);app.directive("testCollector", function () {返回 {限制:A",范围: {},转置:真实,替换:真的,控制器:功能($范围){console.log($scope);},链接:函数(范围,元素,属性){控制台日志(属性);范围[attrs.testCollector] = {Enteng : 'Dagpin'};},模板:''+'<ul><div ng-transclude></div></ul>'+'</div>'}});app.directive("testData", function(){返回 {限制:A",要求:'^testCollector',转置:真实,替换:真的,范围: {xxValue: '@',xxHref: "@"},模板:'<li><a href="{{xxHref}}">{{xxValue}}</a></li>'}});这里是解决问题
解决方案 要了解已插入的 angular 新元素,您需要首先使用 $compile
服务编译该元素,例如 $compile(div)($scope)
那么只有你可以在 Angular DOM 中附加该元素.
而且你的指令已经呈现在 html 上,所以 div 结构发生了变化.
代替 $('#testCol') 使用 angular.element('#testCol ul div')
这是工作小提琴
更新 1
根据@enzey DOM 操作不应在控制器内部完成.它应该在指令内完成.这就是为什么@Vincent &我在小提琴中进行了更改.DOM 操作逻辑已移至内部指令.
这是更新的小提琴
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 :)
My 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>
My 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>'
}
});
Here is Fiddle with Problem
解决方案 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.
And you directive has already rendered on html, so the div structure is changed.
instead of doing $('#testCol') use angular.element('#testCol ul div')
Here is Working Fiddle
Update 1
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.
Here is Updated Fiddle
这篇关于以编程方式在指令中添加指令的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文