角度数据与通过PARAMS结合 [英] angular data binding with passed params

问题描述

深化我的项目，但与数据绑定一个嗝。

Furthering my project but having a hiccup with databinding.

在我的数据的变化没有得到反映在DOM

the change in my data is not getting reflected on the DOM

我已经JS函数/对象中的一个构造函数。

I've a constructor function inside JS function/object.

constructor: function() {
    var self = this;
    var navigation = angular.module("navigation", []);
    navigation.controller("ProductIDsController", function($scope) {
        $scope.productIds = self.productIds;
    });
    angular.bootstrap(document.getElementById('navigation'), ['navigation']);
}

和产品的ID在同一级别定义

and product id's are defined on the same level

productIds: ["abc", "xyz", "test"], //DOM gets populated from this array via angular

init: function(productIds) {
    console.log(this.productIds); // displays ["abc", "xyz", "test"]
    this.productIds.push("another item"); //this didn't work on the dom either
    this.productIds = productIds; //I changed the productId's by passing another array
    console.log(this.productIds); //the array got changed but DOM is still the same, 
}

HTML

    <div id="navigation">
        <ul data-ng-controller="ProductIDsController">
            <li data-ng-repeat="productId in productIds">{{productId}}</li>
        </ul>
    </div>

最初DOM被由给定数组填充，但我通过在另一个数组后，它不改变。我怎么能有数据绑定的productId在给定的情景？

Initially the DOM gets populated by the given array, but it's not changing after I pass in another array. how can I have data bind productId's in the given scenario?

编辑：JS小提琴

http://jsfiddle.net/casadev/n50ecw5m/

推荐答案

当你改变范围之外的价值，你必须调用 $范围。$适用（）明确。
https://docs.angularjs.org/guide/scope

When you change the value outside of scope, you have to call $scope.$apply() explicitly. https://docs.angularjs.org/guide/scope

更新

http://jsfiddle.net/qv31awmq/2/

puremvc.define({
    name: "modules.search.view.components.Navigation",

    constructor: function () {
        var self = this;
        var navigation = angular.module("navigation", []);
        navigation.controller("ProductIDsController", function ($scope) {
            self.$scope = $scope;
            $scope.productIds = self.productIds;
        });
        angular.bootstrap(document.getElementById('navigation'), ['navigation']);
    }
}, {
    delegate: null,
    $scope: null,
    productIds: ["abc", "xyz", "test"],

    init: function (productIds) {
        var self = this;
        // http://stackoverflow.com/questions/25941124/angular-data-binding-with-passed-params/25941351#25941351
        self.productIds.length = 0;
        angular.forEach(productIds, function (entry) {
            self.productIds.push(entry);
        });
        self.$scope.$apply();
    }
}, {});

var nav = new modules.search.view.components.Navigation();
nav.init(['foo', 'bar']);

这篇关于角度数据与通过PARAMS结合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！