Angularjs双向

同一页

两个不同控制器的结合领域我创建了有两个控制器，我尝试我怎么可以使用双向绑定，以便当h3在anotherController标题是一旦用户更新了此示例页面进入他们的年龄。一旦年龄更新，我不知道如何连接控制器。我正在查看事件流更新ageHolder.age - >更新AgeData - >更新anotherController getCategory表达式。Angularjs双向

有了这两个控制器，我能够触发ageUpdated事件，但我无法得知如何更新h3中的文本。

<!DOCTYPE html> 
<html ng-app="factoryApp"> 
<head> 
<meta charset="utf-8" /> 
<script src="/scripts/angular.js"></script> 
<script src="/scripts/FactoryApp.js"></script> 
</head> 
<body> 
    <div ng-controller="factoryController as gsc"> 
    <label>Age:<input type="text" ng-model="gsc.ageHolder.age" ng-model-options="{ getterSetter: true }"/></label> 
    </div> 
    <div ng-controller="anotherController as asc"> 
    <h3>You are {{ asc.getCategory() }}.</h3> 
    </div> 
</body> 
</html> 

    var app = angular.module('factoryApp', []); 
    app.factory('AgeData', function() { 
    return {age: 0}; 
    }); 
    app.controller('factoryController', function(AgeData){ 
     var gsc = this, _age = 20; 
     gsc.ageHolder = {}; 
     gsc.ageHolder.age = function (anAge) { 
     if (arguments.length) { 
     AgeData.age = anAge; 
     AgeData.sendMessage(anAge); 
     } 
     }; 
    }); 

    app.controller('anotherController', function(AgeData, $scope) { 
    console.log('Age is ', AgeData); 
    var asc = this; 
    var age = AgeData.age; 
    $scope.$on('ageUpdated', function() { 
     console.log('Age is updated'); 
     age = AgeData.age; 
    }); 
    asc.getCategory = function() { 
     if (age < 5) 
     return "Toddler"; 
     else if (age < 13) 
     return "Child"; 
     else if (age < 20) 
     return "Teen"; 
     else if (age < 30) 
     return "Youngster"; 
     else if (age < 45) 
     return "Middle age"; 
     else if (age < 60) 
     return "Mature person" 
     else 
     return "Senior Person";     
    } 
    });

来源

2016-05-11 randominstanceOfLivingThing

这不是同一个问题。我没有使用$ scope。我使用控制器作为语法，并使用函数语法来使用getCategory进行更新。 – randominstanceOfLivingThing

 var app = angular.module('factoryApp', []); 
 
     app.factory('AgeData', function ($rootScope) { 
 
      return { 
 
       age: 0, 
 
       'sendMessage': function (msg) { 
 
        $rootScope.$broadcast('ageUpdated', msg); 
 
      } 
 
     }; 
 
     }); 
 

 
     app.controller('factoryController', function(AgeData){ 
 
      var gsc = this; 
 
      gsc.ageHolder = { 
 
       'age': AgeData.age 
 
      }; 
 
      gsc.ageHolder.setAge = function (anAge) { 
 
       if (arguments.length) { 
 
        AgeData.age = anAge; 
 
        AgeData.sendMessage(anAge); 
 
       } 
 
      }; 
 
     }); 
 

 
     app.controller('anotherController', function(AgeData, $scope) { 
 
      console.log('Age is ', AgeData); 
 
      var asc = this; 
 
      var age = AgeData.age; 
 
      $scope.$on('ageUpdated', function() { 
 
       console.log('Age is updated'); 
 
       age = AgeData.age; 
 
      }); 
 

 
      asc.getCategory = function() { 
 
       if (age < 5) 
 
        return "Toddler"; 
 
       else if (age < 13) 
 
        return "Child"; 
 
       else if (age < 20) 
 
        return "Teen"; 
 
       else if (age < 30) 
 
        return "Youngster"; 
 
       else if (age < 45) 
 
        return "Middle age"; 
 
       else if (age < 60) 
 
        return "Mature person" 
 
       else 
 
        return "Senior Person";     
 
       } 
 
      });

<!DOCTYPE html> 
 
    <html ng-app="factoryApp"> 
 
    <head> 
 
     <meta charset="utf-8" /> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    </head> 
 
    <body> 
 
     <div ng-controller="factoryController as gsc"> 
 
      <label>Age:</label> 
 
      <input type="text" ng-model="gsc.ageHolder.age" ng-model-options="{getterSetter: true }" ng-change="gsc.ageHolder.setAge(gsc.ageHolder.age)"/> 
 
     </div> 
 
     <div ng-controller="anotherController as asc"> 
 
      <h3>You are {{ asc.getCategory() }}.</h3> 
 
     </div> 
 
    </body> 
 
    </html>

我认为有几个认为你在你的代码错过：

你听上 'ageUpdate' 事件，但没有功能fireing该事件
分配模型转换为输入文本，但如果输入值更新/更改，则忘记添加观察器。
您错过了工厂的'sendMessage'功能。

请看看上面的代码，告诉我是预期的结果？

干杯，

来源

2016-05-12 03:51:37 mtamma

请重新阅读该问题。 – randominstanceOfLivingThing

这也不是一个答案。你没有添加任何东西。 – randominstanceOfLivingThing

如果你仔细阅读代码，你会发现我在那里添加了一些东西。请您在此plunkr - > https://plnkr.co/edit/IDT2zA8eiBYUIvvWDBJl?p=preview – mtamma

回答

相关问题