Question

我正在尝试在服务数据更改时更新视图上的范围值。

问题在于，（a）如果我更新不同控制器中的数据，则（b）该值不会在视图上更新。

main.html中

$scope.universaltagupdate =   function union_arrays (x,y,Tag) {
    var obj = {};
    for (var i = x.length-1; i >= 0; -- i) {
        obj[x[i]] = x[i];
    }
    for (var i = y.length-1; i >= 0; -- i) {
        obj[y[i]] = y[i];
    }
    var res = [];
    for (var k in obj) {
        if (obj.hasOwnProperty(k)) {  // <-- optional
            res.push(obj[k]);
        }
    }
    //this uses a service to set firebase value 
    return Tag.updatetag(res);
}

main.js

<!-- breadcrumb row -->
<div ng-controller="mainController">
    <span ng-if="memberCompany !== null">{{ memberCompany }}</span>
</div>
<!-- / breadcrumb -->

如果我在不同的控制器中更新服务值，我希望能够在索引视图上显示更新的值，以便在整个应用程序中可行

其他控制器

// breadcrumb service
app.service('breadcrumb', function() {

    // variables
    var memberCompany = null;

    return {
        // get compnay
        getCompany: function() {
            return memberCompany;
        },
        // set company
        setCompany: function(value) {
            memberCompany = value;
        }
    }
});

// main controller
app.controller('MainController', ['$scope', 'breadcrumb', function($scope, breadcrumb) {

        // get company to display in view
        $scope.memberCompany = breadcrumb.getCompany();
    }
]);

如何在索引视图发生更改后显示更新后的值？

Answer 1

您可以在该服务的控制器中使用$watch：

$scope.$watch(function() {
    return breadcrumb.getCompany()
}, function(newValue, oldValue) {
    $scope.memberCompany = newValue;
});

Answer 2

如果这是整个网站的必要条件，我肯定会远远地远离在各处添加一堆手表，因为它们对于开发时间和计算机资源来说都是昂贵的。我会先写相应的服务：

angular.module('myModule').service('Breadcrumb', function() {
  return {
    company: null,
    setCompany: function(company) {
      this.company = company;
    },
    getCompany: function() {
      return this.company;
    }
  };
});

虽然在我看来，getter和setter绝对是非常不必要的（你可以设置Breadcrumb.company = company并通过Breadcrumb.company获得。继续，您应该将痕迹路径服务分配给根范围：

angular.module('myModule').run(function($rootScope, Breadcrumb) {
  return $rootScope.breadcrumb = Breadcrumb;
});

然后，此时您可以将此服务注入您的控制器/指令，并在应用程序的任何视图中调用它，如下所示：

<span class="my-company-name" ng-bind="$root.breadcrumb.company.name" />

这使您无需在所有内容上调用观察者，并且只允许您在应用程序逻辑中实际需要时注入Breadcrumb服务。但是，就像我刚开始说的那样，它实际上取决于这项服务的使用范围，因为您不希望使用任意值来混淆$rootScope。如果您不想将其分配给$rootScope，您可以在控制器和指令中分配它：

angular.module('myModule').controller('ApplicationCtrl', function($scope, Breadcrumb) {
  $scope.breadcrumb = Breadcrumb;
});

并从以下模板访问它：

<span ng-bind="breadcrumb.company.whatever" />

希望有所帮助！

服务数据更改时更新范围值

2 个答案: