如何強制Angularjs中的指令事件更新視圖

Question

我有一項工作，並堅持了2天。希望大家知道angularjs幫助我:)。 當模型發生變化時，我需要強制更改html。例如：

這是HTML代碼：

<!--CAKE LIST--> 
    <div id="cakelist" ng-controller="CakeListCtrl"> 

     <ul class="thumbnails cake-rack" cakes="cakes" ng-model="cakesModel"> 
<li class="pull-left cake-unit" ng-repeat="cake in cakes" cake="cake"> 
    <div class="thumbnail"> 
     <a href="{{cake.link}}"> 
      <img ng-src="{{cake.avatar}}" alt="{{cake.title}}" class="img img-rounded img-polaroid" /> 
     </a> 
     <h5 class="pull-left"> 
      <a href="{{cake.link}}">{{cake.title}}</a> 
     </h5> 
     <a href="{{cake.linksearch}}" class="pull-right shared">Shared</a> 
     <div class="clearfix"></div> 
     <ul class="attrs unstyled"> 
      <li> 
       <div class="pull-left">Mã sản phẩm</div> 
       <span class="pull-right">{{cake.type}}</span> 
      </li> 
     </ul> 
    </div> 
</li> 
     </ul> 
     <input type="button" class="btn btn-primary" value="add more cake" class="cake-more" ng-click="addCake()" /> 
     <input type="button" class="btn btn-danger" value="clear cake" class="cake-clear" ng-click="clear()" /> 
     <img alt="Loading" src="/imagesroot/ajax-loader-1.gif" loading-stage="loadingStage" class="cake-loading"/> 

    </div> 

現在一個具有控制器的外部的菜單：

<div id="cake-catalog" class="cake-catalog"> 
    <ul class="nav"> 
     <li class="active"> 
      <a cake-menu-unit href="sacmscategory50c2302b7ff0a">Nhân vật hoạt hình</a> 
     </li> 
     <li> 
      <a cake-menu-unit href="sacmscategory50c2308717a84">Động vật</a> 
     </li> 
     <li> 
      <a cake-menu-unit href="sacmscategory50c2309da00f6">Tạo hình 3D</a> 
     </li> 
     <li> 
      <a cake-menu-unit href="sacmscategory50c230ba08d9d">Các mẫu hình khác</a> 
     </li> 
    </ul> 
</div> 

我有附加和角模塊明確：

var CakeList = angular.module('CakeList', ['ngResource']); 
CakeList.service('CakeService', function($rootScope) { 
    var cakedata = [{avatar:"test", title: "test2"}]; 
    $rootScope.loadCake = false; 
    var bf = function() { $rootScope.loadCake=true; }; 
    var at = function() { $rootScope.loadCake=false; }; 
    return { 
     cakes: function() { 
      bf(); 
      at(); 
      return cakedata; 
     }, 
     addCake: function() { 
      bf(); 
      cakedata.push(cake); 
at(); 
     }, 

     clear: function() { 
      cakedata = []; console.log('clear'); 
     } 
    }; 
}); 
CakeList.directive('cakeCatalog', function($rootScope, CakeService) { 
    var clickfn = function(e) { 
     e.preventDefault(); 
     CakeService.clear(); 
    }; 
    var nonclickfn = function(e) { 
     e.preventDefault(); 
     console.log('nonclickfn'); 
    }; 

    return { 
     restrict: "C", 
     link: function(scope, element, attrs) { 
      $rootScope.$watch('loadCake', function(newValue, oldValue) { 
       if (newValue===true) { 
        element.find('a').off('click').on('click', nonclickfn); 
       } 
       else { 
        element.find('a').off('click').on('click', clickfn); 
       } 
      }); 
     } 
    }; 

但是當運行時，我把點擊菜單中的一個元素，然後列表蛋糕不清楚，即使我檢查控制檯博。console.log x並看到cakedata真的很清楚！你能幫我解決這個案子嗎？ :)

Answer 1

首先，使用無處不在的$ rootScope（除其他外）的設計看起來有點奇怪。但這不是問題的原因。問題是$ watch不正確。

首先，使用loadCake作爲一個對象，而不是原始類型：

var loadCake = { loaded: false}; 

請使用您$watch聲明objectEquality參數：

 $rootScope.$watch('loadCake', function(newValue, oldValue) { 
      if (!newValue) return; 
      if (newValue.loaded === true) { 
       element.find('a').off('click').on('click', nonclickfn); 
      } 
      else { 
       element.find('a').off('click').on('click', clickfn); 
      } 
     }, true);