Question

我有一个工厂变量，由两个指令共享。一个指令改变它，我需要它来更新其他指令中的值。

这是我的工厂代码

commonApp.factory('setSmsMessage', [function () {
var factoryObj = {
    data: {
        isSms: false
    },
    setSms: function () {
        factoryObj.data.isSms = true;
    },
    reset: function () {
        factoryObj.data.isSms = false;
    }
};

return factoryObj;

}]）;

这是我的一个指令

commonApp.directive('osSendMessage', ['setSmsMessage',
function (setSmsMessage) {
return {
    restrict: 'A',
    scope: {
        sent: '='
    },
    link: function (scope, element, attrs) {

    },
    controller: function ($scope) {


        $scope.setSmsMessage = setSmsMessage.data;

        $scope.$watch('setSmsMessage.isSms', function (newValue, oldValue, scope) {
            console.log(setSmsMessage.data.isSms);
        }, true);

    },
    templateUrl: "/Static/js/AngularApps/MessageCenter/sendmessage/Templates/sendmessages.html"
};
}]);

这是我设置变量

的另一个指令

commonApp.directive('osMessageCenterMenu', ['setSmsMessage', function (setSmsMessage) {
return {
    restrict: 'A',
    scope: {
        messages: "="
    },
    controller: function ($scope) {

    },
    link: function (scope) {


        // opening sms

        $("#toggleSendSmsMessage").click(function () {
            scope.openSendSms();
        });
        scope.openSendSms = function () {
            console.log("from menu: " + setSmsMessage.data.isSms);
            setSmsMessage.setSms();
            console.log("from menu: " + setSmsMessage.data.isSms);

            $("#SendMessageForm").toggle();
        }

        // end here
        ,

    templateUrl: "/Static/js/AngularApps/MessageCenter/Templates/messageCenterMenu.html"
};
}]);

但是在另一个听它的控制器中没有更新该值

Answer 1

更好的方法是将 isSms 属性存储在全局对象中，如下所示：

＆＃xA;＆＃xA;

 < code> commonApp.factory（'setSmsMessage'，[function（）＆＃xA; {＆＃xA; var factoryObj = {＆＃xA; data：{＆＃xA; isSms：false＆＃xA;}，＆＃xA; setSms：function（）＆＃xA; {＆＃xA; factoryObj.data.isSms = true;＆＃xA;}，＆＃xA; reset：function（）＆＃xA; {＆＃xA; factoryObj.data。 isSms = false;＆＃xA;}＆＃xA;};＆＃xA;＆＃xA; return factoryObj;＆＃xA;}]）;＆＃xA;

＆＃xA; ＆＃xA;

现在在控制器中将 $ scope 链接到工厂全局 object ，它包含 isSms 属性。

＆＃xA;＆＃xA;

  //将setSmsMessage链接到工厂数据对象＆＃xA; $ scope.setSmsMessage = setSmsMessage.data;＆＃xA;＆＃xA; //现在调用setSms （）函数。 $ scope.setSmsMessage将在调用后更新。＆＃xA; setSmsMessage.setSms（）;＆＃xA;＆＃xA; //您现在可以监视$ scope中的更改，如此＆＃xA; $ scope。 $ watch（'setSmsMessage.isSms'，function（newValue，oldValue，scope）{＆＃xA; console.log（setSmsMessage.data.isSms）;＆＃xA;}，true）;＆＃xA;

＆＃xA;＆＃xA;

工作演示

＆＃xA;＆＃xA;

＆＃xD;＆＃xA;

＆＃ xD;＆＃xA;

 （function（）{＆＃xD;＆＃xA;＆＃xD;＆＃xA; var commonApp = angular.module（“app”，[]）;＆＃xD;＆＃xA;＆＃xD;＆＃xA; commonApp.factory（'setSmsMessage'，[function（）＆＃xD;＆＃xA; { ＆＃xD;＆＃xA; var factoryObj = {＆＃xD;＆＃xA;数据：{＆＃xD;＆＃xA; isSms：false＆＃xD;＆＃xA;}，＆＃xD;＆＃xA ; setSms：function（）＆＃xD;＆＃xA; {＆＃xD;＆＃xA; factoryObj.data.isSms = true;＆＃xD;＆＃xA;}，＆＃xD;＆＃x一个; reset：function（）＆＃xD;＆＃xA; {＆＃的xD;＆＃XA; factoryObj.data.isSms = false;＆＃xD;＆＃xA; }＆＃的xD;＆＃XA; };＆＃的xD;＆＃XA;＆＃的xD;＆＃XA; return factoryObj;＆＃xD;＆＃xA; }]）;＆＃的xD;＆＃XA; ＆＃的xD;＆＃XA; commonApp.controller（“smsController”，function（$ scope，setSmsMessage）{＆＃xD;＆＃xA; //将setSmsMessage链接到工厂数据对象＆＃xD;＆＃xA; $ scope.setSmsMessage = setSmsMessage.data;＆ #xD;＆＃xA;＆＃xD;＆＃xA; //现在调用setSms（）函数。$ scope.setSmsMessage将在调用后更新。＆＃xD;＆＃xA; setSmsMessage.setSms（） ;＆＃xD;＆＃xA;＆＃xD;＆＃xA; $ scope.reset = function（）＆＃xD;＆＃xA; {＆＃xD;＆＃xA; setSmsMessage.reset（）;＆＃ xD;＆＃xA;}＆＃xD;＆＃xA;＆＃xD;＆＃xA; $ scope。$ watch（'setSmsMessage.isSms'，function（newValue，oldValue，scope）{＆＃xD;＆＃ xA; console.log（setSmsMessage.data.isSms）;＆＃xD;＆＃xA;}，true）;＆＃xD;＆＃xA;}）;＆＃xD;＆＃xA; ＆＃xD;＆＃xA; commonApp.directive（'osMessageCenterMenu'，['setSmsMessage'，function（setSmsMessage）＆＃xD;＆＃xA; {＆＃xD;＆＃xA; return {＆＃xD;＆＃ xA;限制：'A'，＆＃xD;＆＃xA;范围：{＆＃xD;＆＃xA;消息：“=”＆＃xD;＆＃xA;}，＆＃xD;＆＃xA; controller：function（$ scope）＆＃xD;＆＃xA; {＆＃xD;＆＃xA;＆＃xD;＆＃xA;}，＆＃xD;＆＃xA; link：function（scope）＆＃ xD;＆＃xA; {＆＃xD;＆＃xA; console.log（范围）;＆＃xD;＆＃xA;＆＃xD;＆＃xA; //打开短信＆＃xD;＆＃xA;＆ #xD;＆＃xA; $（“＃toggleSendSmsMessage”）。click（function（）＆＃xD;＆＃xA; {＆＃xD;＆＃xA; scope.openSendSms（）;＆＃xD;＆＃xA ;}）;＆＃xD;＆＃xA; scope.openSendSms = function（）＆＃xD;＆＃xA; {＆＃xD;＆＃xA; console.log（“from menu：”+ setSmsMessage.data。 isSms）;＆＃xD;＆＃xA; setSmsMessage.setSms（）;＆＃xD;＆＃xA; console.log（“from menu：”+ setSmsMessage.data.isSms）;＆＃xD;＆＃xA; ＆＃xD;＆＃xA; $（“＃SendMessageForm”）。togg勒（）;＆＃的xD;＆＃XA; }＆＃的xD;＆＃XA; }＆＃的xD;＆＃XA; }＆＃的xD;＆＃XA;}]）;＆＃的xD;＆＃XA;＆＃的xD;＆＃XA;}）（）

＆＃的xD;＆＃XA; < pre class =“snippet-code-html lang-html prettyprint-override”> ＆lt; script src =“https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min。 js“＆gt;＆lt; / script＆gt;＆＃xD;＆＃xA;＆lt; script src =”https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js“＆gt ;＆lt; / script＆gt;＆＃xD;＆＃xA;＆＃xD;＆＃xA;＆lt; div ng-app =“app”＆gt;＆＃xD;＆＃xA; ＆lt; div ng-controller =“smsController”＆gt;＆＃xD;＆＃xA; ＆lt; div os-message-center-menu＆gt;＆＃xD;＆＃xA; ＆lt; button id =“toggleSendSmsMessage”＆gt;重置消息＆lt; / button＆gt;＆＃xD;＆＃xA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA; ＆LT; / DIV＆GT;＆＃的xD;＆＃XA;＆LT; / DIV＆GT;  ＆＃的xD;＆＃XA;

＆＃的xD;＆＃XA;

 ＆＃的xD;＆＃XA; ＆＃XA;

Answer 2

您还可以在工厂中使用$rootScope，并emit使用custom data进行活动，然后subscribe使用所有event controllers }}

另外，尝试根据功能命名factory，显而易见的原因。

以下是我想说的： -

＆＃13;

(function() {
  angular
  .module("myApp", [])
  .factory('smsMessage', ['$rootScope', function($rootScope) {
    var factoryObj = {
      data: {
        isSms: false
      },
      setSms: function() {
        factoryObj.data.isSms = true;
        $rootScope.$emit('SET', {isSms : true});
      },
      reSet: function() {
        factoryObj.data.isSms = false;
        $rootScope.$emit('RE-SET', {isSms : false});
      }
    };
    return factoryObj;
  }])
  .controller("controllerOne", function($scope, $rootScope, smsMessage) {
    
    $scope.setSmsMessage = smsMessage.data;
    $scope.set = function(){
        smsMessage.setSms();
    }
    $scope.reset = function(){
        smsMessage.reSet();
    }
    
    $rootScope.$on('SET', function(event, data) {
      alert('SET in controllerOne');
      $scope.setSmsMessage = data.isSms;
    });

    $rootScope.$on('RE-SET', function(event, data) {
      alert('RE-SET in controllerOne');
      $scope.setSmsMessage = data.isSms;
    });
  })
  .controller("controllerTwo", function($scope, $rootScope, smsMessage) {
    
    $scope.setSmsMessage = smsMessage.data;
    $scope.set = function(){
        smsMessage.setSms();
    }
    $scope.reset = function(){
        smsMessage.reSet();
    }

    $rootScope.$on('SET', function(event, data) {
      alert('SET in controllerTwo');
      $scope.setSmsMessage = data.isSms;
    });

    $rootScope.$on('RE-SET', function(event, data) {
      alert('RE-SET in controllerTwo');
      $scope.setSmsMessage = data.isSms;
    });
  });
})()

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
   <div ng-controller="controllerOne">
      <label>Controller One</label>
      <button ng-click="set()">SET</button>
      <button ng-click="reset()">RE-SET</button>
   </div>
  <div ng-controller="controllerTwo">
      <label>Controller Two</label>
      <button ng-click="set()">SET</button>
      <button ng-click="reset()">RE-SET</button>
   </div>
</div>

＆＃13;

Angular JS手表厂变量

2 个答案: