以编程方式在指令中添加指令 [英] 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屋！