AngularJS：包含无法通过自定义指令运行

Question

我有一个自定义指令，我想用它在单击文档后将html内容包含到文档中。

柱塞： http ://plnkr.co/edit/u2KUKU3WgVf637PGA9A1?p=preview

JS：

angular.module("app", [])
.controller("MyController", function ($scope) {

})
.directive('addFooter', ['$compile', '$rootScope', function($compile, $rootScope){
    return {

     restrict: 'E',
         template: '<button>add footer</button>',
         controller: 'MyController',
        link: function( scope, element, attrs, controller) {
            element.bind( "click", function() {
                scope.footer = "'footer.html'";

       })}
    };
 }])

HTML：

<body ng-app="app">

  <script type="text/ng-template" id="footer.html">
    FOOTER
  </script>

<div ng-controller="MyController">

    <add-footer></add-footer>

    <div ng-include="footer"></div>

</div>

</body>

不知道为什么它不起作用，因为在将其移入指令之前它可以正常工作。 在指令之外，我还通过一些链接引用了$ scope.footer。 我尝试使用$ rootScope，但也没有效果。 有什么建议吗？

Answer 1

第一。 删除不必要的引号：

element.bind( "click", function() {
    scope.footer = "footer.html"; // not "'footer.html'"
});

第二。 您应该通知angularjs您已经异步更新了范围值：

element.bind("click", function() {
    scope.$apply(function() {
        scope.footer = "footer.html";
    });
});

还是那样

element.bind("click", function() {
    scope.footer = "footer.html";
    scope.$apply();            
});