Javascript 如何重新注册动态加载的角度模板'；指示

我有一个指令，它在输入字段上加载一个模板。其中之一是jQuery/Bootstrap日期选择器

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

单击后，将显示日历，并调用

$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

并移至

input field.html

，以测试按钮逻辑是否正确，则会调用单击

我在

.append

之后尝试了

$scope.$apply

和

$scope.digest

，但是我得到了一个“digest ready in progress error”

更新：

根据下面的评论，我们尝试删除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)

}

$scope.addCalendarFooter=function（）{
var html=“”；
var myEl=angular.element（document.getElementsByClassName（'datepicker'）；
html（html）；
$compile（myEl）（$scope）
}

---

上面通过ng include插入my.html模板，但是它是否替换了日期选择器的内容，而不是在其底部插入。尝试了。追加，但这两者都不值得。

如果最初在模板中包含页脚，但使用ng if/ng show隐藏它，该函数会只更改一个标志并将其隐藏起来w以前隐藏的页脚。

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

---

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

您说过，您的问题是，在调用

$scope.$apply

或

$scope.digest

后，您会得到他

$digest已在进行中

错误

---

一个巧妙的绕过方法是使用。它最大的优点之一是它知道是否应该执行not的额外摘要循环。

如果使用ng include，请不要忘记路径开头和结尾的单引号

关于ng的文件包括：

确保用单引号将其括起来，例如src=“'myPartialTemplate.html'”

应该是：

var html=”“；

或：

var html=”“；

但不是：

---

var html=“”；

引用您的更新：

上面通过ng include插入my.html模板，但是它替换了datepicker的内容，而不是在它的底部插入

上述问题是由于使用了

.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) 

指令控制器

---

模拟类似的情况。当然它不起作用。

$（'#日期选择器'）。追加（$（''）.load（'myDir/calendar/customFooter.html'））

-这是一个问题。了解如何以角度方式进行操作。当然，您可以修复它，但这是一个非常糟糕的做法。@dfsq-谢谢您的建议。您可以提供一些关于“角度方式”的指导吗？您应该使用ngIf（ngInclude in to lazy load template）。然后用UI引导日期选择器代替jQuery插件。@dfsq-谢谢你，在ng include上取得了一些进展。请参阅上面的更新，“。您的进度仍然很差。这不是一个角度。也许我需要添加答案。我正在使用引导日期选择器，因此一开始无法访问它，否则我将使用“不包含”。日期选择器DOM标记在单击时添加到html中。请参阅使用ng include更新。”

$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)

}

 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) 

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