javascript - 自定义指令内 ngDirectives 的奇怪行为

Question

我写了这个指令:

app.directive('vvPopover', function($templateCache, $compile){
    return{
        link:function(scope, elem, attrs){
            elem.click(function(){
                $(this).parent().append($compile($templateCache.get('notificationPanel'))(scope));

            });    
        }
    }
});

采用此模板:

<script type="text/ng-template" id="notificationPanel">
    <div class="ss-popover" ng-show="false">
        <div>Notifiche</div>
        <ol>
            <li ng-repeat="notif in [0,1,2]">{{notif}}</li>
        </ol>
    </div>
</script>

并将其放入此 html 中:

<li class="headerCampaign">
         <button class="icon-bell" vv-popover></button>
</li>

通过 Chrome 看到的结果是:

<li class="headerCampaign">
       <button class="icon-bell" vv-popover=""></button>
       <div class="ss-popover ng-binding ng-scope" ng-show="false">
           <div>Notifiche</div>
           <ol>
           <!-- ngRepeat: notif in [0,1,2] -->
           </ol>
       </div>
</li>

如您所见，ng-show指令不受 Angular 影响。 ng-repeat 已编译，但不会迭代数组。

对于这种奇怪的现象有什么解释吗？

Answer 1

在点击函数中调用scope.$apply()