如何从Angularjs中的指令事件强制更新视图

Question

I have a work and stuck it 2 days. Hope everyone know angularjs help me :). I need to force a change html when have a change on model. Example:

This is html code:

    <!--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>

now a have a menu outside of controller:

<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>

I have angular module for add and clear:

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);
                }
            });
        }
    };

But when runtime, i put click on a element of menu then the list cake not clear, even i check console.log in console box and see the cakedata really clear!. Can you help me this case ? :)

Answer 1

First of all, the design seems a bit weird by using everywhere $rootScope (among other things). But that's not the cause of the problem. The problem is the $watch which is not correct.

First of all, use loadCake as an object instead of a primitive type:

var loadCake = { loaded: false};

Use the objectEquality parameter in your $watch statement:

        $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);