以编程方式在指令中添加指令

Question

我想将我的指令的另一个实例附加到父指令中，但我不能使用 $apply 重新编译我的指令。

我想我错过了这里的某个地方:)

我的HTML代码

<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代码

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>'
    }
});

这里是Fiddle with Problem

Answer 1

要了解 angular 新元素已被插入，您需要首先使用 $compile 服务编译该元素，例如 $compile(div)($scope) 然后您才可以将该元素附加到 Angular DOM.

并且您的指令已经在 html 上呈现，因此 div 结构已更改。

而不是做 $('#testCol') 使用 angular.element('#testCol ul div')

这里是Working Fiddle

更新 1

根据@enzey DOM 操作不应在控制器内部完成。它应该在指令内部完成。这就是为什么@Vincent 和我在 fiddle 中进行更改的原因。 DOM 操作逻辑已移至内部指令。

这里是Updated Fiddle

Answer 2

您正在尝试从控制器中进行 DOM 操作。更改 DOM 是指令的目的。这是您需要解决的第一件事。

至于给子元素添加指令DOM只需要使用指令的编译函数即可

Module.directive('name', function () {
    return {
        compile: function ($element, $attrs) {
            \ here
        }
    }
}

以编程方式在指令中添加指令

Adding directive inside the directive programatically

javascript

angularjs

angularjs-directive

angularjs-controller

angularjs-compile