从指令

Question

我有两个模块＆＃34;核心＆＃34;和＆＃34; ui＆＃34;。

ui模块依赖于核心。这是我的core.js的代码：

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

//Services
core.service('httpInformationService', function() {

    this.requestCount = 0;
    this.responseCount = 0;

    this.incrementRequest = function() {
        this.requestCount++;
        console.log('incrementRequest:' + this.requestCount);
    };

    this.incrementReponse = function() {
        this.responseCount++;
    }

    this.decrementRequest = function() {
        this.requestCount--;
        console.log('decrementRequest:' + this.requestCount);
    };

    this.decrementResponse = function() {
        responseCount--;
    }

    this.getRequestCount = function() {
        return requestCount;
    }

    this.getResponseCount = function() {
        return responseCount;
    }
});

//Service provider
core.provider("httpServiceInformationProvider", function() {
    var provider = {};

    provider.$get = ['httpInformationService', function( service ) {
        return service;
    }];

    return provider;
});

//HTTP Interceptor
core.factory('coreHttpInterceptor' ,function( httpInformationService ){
    var coreHttpInterceptor = {
        request: function(config) {
            httpInformationService.incrementRequest();
            return config;
        },
        response: function(response) {
            httpInformationService.decrementRequest();
            return response;
        }
    }

    return coreHttpInterceptor;
});


var config = {
    base_url: enviromnent_url,
}

core.value('config', config);

core.config(function( $interpolateProvider ) {
    $interpolateProvider.startSymbol( "[[" ).endSymbol( "]]" );
});

core.config(function( $httpProvider ) {
   $httpProvider.interceptors.push('coreHttpInterceptor');
});

这是我的ui.js代码：

 var ui = angular.module('ui',[ 'core' , 'ui.bootstrap' ]);

ui.directive( "shLoadify" , function( httpServiceInformationProvider ){
    return {
        restrict: "AE",
        link: function(scope, element, attrs) {
            element.bind( "click", function() {
                element.text("Loading...");
                element.prop( "disabled", true );
            });
        },
        controller: function($scope) {
            $scope.$watch('httpServiceInformationProvider', function(oldValue, newValue){
                console.log(oldValue + ' ' + newValue);
            }, true);
        }
    }
});

正如您所看到的，我正在尝试使用$ scope.watch从我的控制器中访问httpInfomationService的requestCount属性。

问题是newValue和oldValue始终为null。为什么会这样？

Answer 1

方法1

如果您希望在requestCount变量发生变化时执行某项操作（这是服务的一部分），则需要broadcast/emit，然后您可以通过on进行监听。但在这种情况下，您需要将服务范围传递给不推荐的范围。

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

app.service('myService',function($rootScope){
  this.requestCount=1
  this.incrementRequestCount=function(){ 
    this.requestCount++
    $rootScope.$broadcast('requestCountChanged', { message: this.requestCount });
  }.bind(this)

})


app.controller('myController',['$scope','myService',function($scope,myService){

  $scope.$on('requestCountChanged', function(event, args) {
      // You will find the updated requestCount in args
    }); 

   $scope.click= myService.incrementRequestCount;

}])

var app1 = angular.module('app1',[]);
    app1.controller('mySecondController',['$scope','myService',function($scope,myService){

      $scope.$on('requestCountChanged', function(event, args) {
            // You will find the updated requestCount in args
        }); 

    }])

方法2

没有在服务中传递范围

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

app.service('myService',function(){
  this.requestCount=1
  this.incrementRequestCount=function(){ 
    debugger;
    this.requestCount++
  }.bind(this)

})


app.controller('myController',['$scope','myService','$rootScope',function($scope,myService,$rootScope){

   $scope.click=function(){
     myService.incrementRequestCount();
     $rootScope.$broadcast('requestCountChanged', { message: myService.requestCount });

   }  

}])

var app1 = angular.module('app1',[]);
    app1.controller('mySecondController',['$scope','myService',function($scope,myService){

      $scope.$on('requestCountChanged', function(event, args) {

            // You will find the updated requestCount in args
        }); 

    }])

方法3

您只能将监视附加到实际位于范围内的属性，否则您无法监视这些属性。因此，只需在您的范围上添加requestCount，就可以使用watch轻松检测其更改，然后使用广播/发射方法。

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

app.service('myService',function(){
  this.requestCount=1
  this.incrementRequestCount=function(){ 
    debugger;
    this.requestCount++
  }.bind(this)

})


app.controller('myController',['$scope','myService','$rootScope',function($scope,myService,$rootScope){

    $scope.requestCount=myService.requestCount
    $scope.$watch('requestCount',function(n,o){
      debugger;
      if(n!=o)
      {
          $rootScope.$broadcast('requestCountChanged', { message: n });
      }
    })
   $scope.click=function(){
     myService.incrementRequestCount();
     $scope.requestCount=myService.requestCount


   }  

}])

var app1 = angular.module('app1',[]);
    app1.controller('mySecondController',['$scope','myService',function($scope,myService){

      $scope.$on('requestCountChanged', function(event, args) {

            // You will find the updated requestCount in args
        }); 

    }])