Question

我尝试使用服务在两个不同的控制器之间共享数据并观察更改，但我找不到如何执行此操作。这是我的代码

月select.component.js：

'use strict'

angular
.module('myApp.monthSelect')

.component('myApp.monthSelect', {
  templateUrl: 'monthSelect/month-select.template.html',
  controller: 'MonthSelectCtrl',
  css: 'monthSelect/month-select.style.css'
})

.controller('MonthSelectCtrl', ['$scope', 'selectedMonthSvc', function ($scope, selectedMonthSvc) {
  selectedMonthSvc.setDate($scope.dt)

}])

周-list.component.js：

'use strict'

angular
.module('myApp.weeksList')

.component('myApp.weeksList', {
  templateUrl: 'weeksList/weeks-list.template.html',
  controller: 'WeeksListCtrl',
  css: 'weeksList/weeks-list.style.css'
})

.controller('WeeksListCtrl', ['$scope', 'selectedMonthSvc', function ($scope, selectedMonthSvc) {
  
  $scope.getDate = selectedMonthSvc.getDate
}])

得到选-month.service.js

angular.module('myApp.svc', [])

.factory('selectedMonthSvc', function () {
  var self = this
  var date = ''

  self.setDate = function (value) {
    return date = value
  }
  self.getDate = function () {
    return date
  }
  return self
})

它在init工作时我在WeeksList控制器中获取日期，但是如果我在MonthSelectCtrl中更改日期，则值不会在WeekList中更新。

我正试图用$ watch观看它，但它不起作用，不知道哪里出错了。

非常感谢你的帮助。

Answer 1

第一次关闭更改factory至service：

 .service('selectedMonthSvc', function () {/**/}

另外

您可以编写watcher来收听更改。

所以相反：

$scope.getDate = selectedMonthSvc.getDate

尝试：

$scope.getDate = selectedMonthSvc.getDate;
    $scope.$watch('getDate', function() {
        // here you get new value
    });

这是 simple demo ，用于演示您的案例

当第二个控制器更新date时，第一个控制器会侦听并反映更改：

angular.module('myApp', [])
    .controller('Ctrl1', function ($scope, App) {
        $scope.status = App.getDate();
        $scope.$watch(function(){
        return App.getDate();
        }, function() {
            $scope.status = App.getDate();
        });
})
    .controller('Ctrl2', function ($scope, App) {
        $scope.status = App.getDate();
        $scope.$watch('status', function() {
            App.setDate($scope.status);
        });
})
    .service('App', function () {
        this.data = {};
        this.data.date = 'someDate';

        var self = this;
        var date = ''

      self.setDate = function (value) {
         this.data.date = value
       }
         self.getDate = function () {
           return this.data.date;
         }
});

Answer 2

试试这个：

// selectedMonthSvc service:

angular.module('myApp.svc', [])
.factory('selectedMonthSvc', function () {

    var date = '';

    var self = this
    self.setDate = setDate;
    self.getDate = getDate;

    return self;    

    function setDate(value) {
        date = value;
    }
    function getDate() {
        return date;
    }
})

// WeeksListCtrl controller

.controller('WeeksListCtrl', ['$scope', 'selectedMonthSvc', function ($scope, selectedMonthSvc) {

  $scope.getDate = getDate;

  function getDate() {
      return selectedMonthSvc.getDate();
  }
}])

Answer 3

var app = angular.module('app', []);

app.controller('firstController', ['$scope','selectedMonthSvc', function($scope, selectedMonthSvc) {
  $scope.date = new Date();

  $scope.changeDate = function() {
    selectedMonthSvc.setDate(new Date())
  }
}]);

app.controller('secondController', ['$scope','selectedMonthSvc', function($scope, selectedMonthSvc) {
  $scope.date = '';

  $scope.selectedMonthSvc = selectedMonthSvc;

  $scope.$watch(function() {
    return $scope.selectedMonthSvc.getDate();
  }, function(newVal) {
    $scope.date = newVal;
  }, true);
}]);

app.factory('selectedMonthSvc', [function() {

  var date = '';

  return {
    getDate: function () {
      return date;
    },
    setDate: function(d) {

      date = d;
    }
  }
}])

以下是工作人员https://plnkr.co/edit/w3Y1AyhcGhGCzon8xAsV?p=preview

Angularjs观察不同控制器中的ng-model变化

3 个答案: