如何重新注册动态加载的角模板指令

Question

我有一个指令，它在输入字段上加载一个带有一堆的模板。其中之一是jQuery/Bootstrap数据报警器。

<my-directive-buttons></my-directive-buttons>

当用户选择/单击datepicker字段时，将显示日历。我还在输入字段中附加了一个ng-click：

<div class='col-sm-6'>
    <div class="form-group">
        <div class='input-group datepick'>
            <input type='text' class="form-control" ng-click="addCalendarFooter()"/>
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>

单击时，将显示日历，并调用$scope.addCalendarFooter：

app.directive('myDrectiveButtons', function($compile) {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: {

        },
        templateUrl: 'controls/input-fields.html',
        link: function(scope, elem, attrs) {

        },
        controller: function($scope) {


            $scope.addCalendarFooter = function() {
                $('#datepicker').append($('<div></div>').load('myDir/calendar/customFooter.html'));
            }

        }
    }
});

我成功地将customFooter.html的内容附加到日历中，但是，在customFooter.html中还有更多的ng-clicks，当按下这些内容时，不会被调用。E.g

customFooter.html

<div>
    <button ng-click="controlClick()">Click Me</button>
</div>

但是，如果我将该按钮从customFooter.html中移出并进入input-field.html，为了测试按钮逻辑是否正确，将调用单击。

我在$scope.$apply和$scope.digest之后尝试了.append，但是我得到了一个‘摘要已经在进行中的错误’。

更新：

根据下面的注释，尝试删除jQuery并使用“角方式”

$scope.addCalendarFooter = function() {

    var html = "<div ng-include src=\"myDir/calendar/customFooter.html\"><\div>";


    var myEl = angular.element(document.getElementsByClassName('datepicker');

    myEl.html(html);

     $compile(myEl)($scope)

}

上面通过ng插入了我的.html模板--但是，它是否替换了数据采集器的内容，而不是插入到它的底部。试过.append，但这也不值得。

Answer 1

引用您的更新：

上面通过ng插入了我的.html模板--但是，它是否替换了数据采集器的内容，而不是插入到它的底部。试过.append，但这也不值得。

上述问题是由于使用.html()方法将HTML插入DOM节点并覆盖所选节点的任何现有内容：

 var html = "<div ng-include src=\"myDir/calendar/customFooter.html\"><\div>";
 var myEl = angular.element(document.getElementsByClassName('datepicker');  
 myEl.html(html); // <== here
 $compile(myEl)($scope) 

您使用上面的逻辑所做的是首先选择.datePicker元素，然后用.html()方法替换它的内部HTML。

作为一种解决办法，您可以使用.append()方法。

注意： angular.element()是一个元素的角包装器，就像在jQuery中有$()一样。因此，在您的情况下，使用document.getElementByClassName()方法是多余的。

尽管上述解决方法可能解决了您的问题，但最好坚持AngularJS可能提供的更干净、更简洁的方法。

Angularesque方法

您不需要通过编程方式在控制器函数中添加/追加模板，从而加载模板部分--至少以角的方式加载。这样，您可能最终不会将动态添加的HTML中的角指令正确地绑定到一个作用域中。

相反，只需将部分包含在原始指令模板中(使用ng-include)，并在单击按钮时使用ngIf或ngShow来显示它。

因此，假设您在原始指令模板中有页脚模板(customFooter.html)，您可以实现预期的结果，如下所示：

指令模板

<div class='col-sm-6'>
    <div class="form-group">
        <div class='input-group datepick'>
            <input type='text' class="form-control" ng-click="addCalendarFooter()"/>
            <span class="input-group-addon">
                <span class="glyphicon glyphicon-calendar"></span>
            </span>
        </div>
    </div>
</div>
<div ng-include="myDir/calendar/customFooter.html" ng-if="isCalenderFooterAdded"></div>

指令控制器

controller: function($scope) {
    $scope.addCalendarFooter = function() {
         $scope.isCalendarFooterAdded = true;
         // or use this if you want to toggle it
         // $scope.isCalendarFooterAdded = !$scope.isCalendarFooterAdded ? true: false;
    }
}

https://plnkr.co/edit/vzCksgmxdEu23t5o3bPH?p=preview模仿类似的情况。

Answer 2

你基本上是手动加载页脚，完全绕过角度。Angular没有看到您正在加载html，因此根本没有编译html模板和绑定指令，包括ng-click。

您可以使用ng-include指令加载指定的模板，而不是自己定制模板。或者，如果您的指令需要其他功能，只需在指令模板本身中包含ng。

Answer 3

如果您最初将页脚包含在模板中，但使用ng-if / ng-show隐藏它，怎么办？然后，该函数将只更改一个标志并显示以前隐藏的页脚。