Angularjs 中的控制器之间共享数据不明确

Question

我创建了一个公共服务来在控制器之间共享数据。

下面是代码片段。

这里在使用 setter 和 getter 时变得不确定。直接访问对象时正在获取值。如何使用 getter 和 setter.

获取值

幕后发生了什么。

// JavaScript source code

(function () {
    'use strict';

    angular.module('app',[])
    
})();


(function () {
    'use strict';

    angular
      .module('app')
      .factory('appcontext', appContext);

    function appContext() {
        var service = {            
            getStartDate: getStartDate,         
          setStartTime : setStartTime,
            startTime : startTime
           
        };

        return service;

        //private variables       

        var startTime = '';
      

        function setStartTime(startTime) {
            startTime = startTime;
        }

        function getStartDate() {
            return startTime;
        }      
        
    }
})();


(function () {
    'use strict';

    angular.module('app')
           .controller("InsController", InsController)

    InsController.$inject = ['appcontext'];

    function InsController(appcontext) {

        appcontext.setStartTime(new Date());

        console.log(appcontext.getStartDate()); // undefined

        appcontext.startTime = new Date();

        console.log(appcontext.startTime); //prints the date correctly

    }          


})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-App="app">
  
  <div ng-controller= "InsController">
    
    <div>{{ }}</div>
    
    </div>
  
  </html>

Answer 1

只是 return 您想要公开的功能。由于您有 getter 和 setter 函数，所以不要 return 变量本身，这不会有太大帮助。创建一个变量 service 来存储您需要的所有内部内容，您的函数应该使用它。

// JavaScript source code

(function () {
    'use strict';

    angular.module('app',[])
    
})();


(function () {
    'use strict';

    angular
      .module('app')
      .factory('appcontext', appContext);

    function appContext() {
        var service = this;
        return {           
            getStartDate: getStartDate,         
            setStartTime : setStartTime          
        };

        //private variables       

        service.startTime = '';
      

        function setStartTime(startTime) {
            service.startTime = startTime;
        }

        function getStartDate() {
            return service.startTime;
        }      
        
    }
})();


(function () {
    'use strict';

    angular.module('app')
           .controller("InsController", InsController)

    InsController.$inject = ['appcontext'];

    function InsController(appcontext) {

        appcontext.setStartTime(new Date());

        console.log(appcontext.getStartDate()); // undefined

    }          


})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-App="app">
  
  <div ng-controller= "InsController">
    
    <div>{{ }}</div>
    
    </div>
  
  </html>

Answer 2

您需要消除 startTime 变量，引用如 service.startTime。您已经在您的服务上为其创建了一个属性，但您的其余代码引用了 var 而不是属性。

function setStartTime(startTime) {
    service.startTime = startTime;
}

function getStartDate() {
    return service.startTime;
}

不确定这是否是您的全部代码，但看起来 StartDate 的一些用途也应该是 StartTime。

Answer 3

我的这篇博客post可能对你有帮助:

http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/05/04/how-to-share-data-between-controllers-in-the-angularjs.aspx

Answer 4

您的代码没有任何问题。如果我只是替换您的 setStartTime 方法参数名称，那只是导致冲突的命名约定。一切正常。

// JavaScript source code

(function () {
    'use strict';

    angular.module('app',[])
    
})();


(function () {
    'use strict';

    angular
      .module('app')
      .factory('appcontext', appContext);

    function appContext() {
        var service = {            
          getStartDate: getStartDate,         
          setStartTime : setStartTime,
          startTime : startTime
        };

        return service;     

        var startTime = '';

        function setStartTime(newStartTime) {
            startTime = newStartTime;
        }

        function getStartDate() {
            return startTime;
        }      
        
    }
})();


(function () {
    'use strict';

    angular.module('app')
           .controller("InsController", InsController)

    InsController.$inject = ['appcontext'];

    function InsController(appcontext) {

        appcontext.setStartTime(new Date());

        console.log(appcontext.getStartDate()); 

        appcontext.startTime = new Date();

        console.log(appcontext.startTime); //prints the date correctly

    }          


})();

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<html ng-App="app">
  
  <div ng-controller= "InsController">
    
    <div>{{ }}</div>
    
    </div>
  
  </html>

Angularjs 中的控制器之间共享数据不明确

sharing data between controller in Angularjs is not clear

angularjs

angular-services