自定义指令中ngDirectives的奇怪行为

时间:2015-10-29 10:19:31

标签: javascript angularjs angularjs-directive angularjs-ng-repeat

我写了这个指令:

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指令不受角度影响。编译ng-repeat但不遍历数组。

对这种奇怪的任何解释?

1 个答案:

答案 0 :(得分:0)

在点击功能中调用scope.$apply()