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

回答

相關問題