Question

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

Plunker：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();            
});

AngularJS：包括不使用自定义指令

1 个答案: