0

我有一份工作并坚持了 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 并看到 cakedata 真的很清楚！你能帮我这个案子吗？:)

4

1 回答 1

2

首先，在任何地方都使用 $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);
于 2013-01-02T07:26:14.977 回答