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>

私は追加とクリアのためのAngularモジュールを持っています:

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をチェックしても、ケーキデータが本当に明確です! このケースを手伝ってくれませんか？:)

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 に答える