angularjs使用單個控制器與兩個視圖

所以我有這種情況，我有兩個意見。一個視圖需要來自用戶的多個輸入，第二個視圖顯示執行一些計算後的輸入結果。由於這兩個視圖都屬於不同的div，所以我必須爲它們分別定義相同的ng控制器。angularjs使用單個控制器與兩個視圖

現在的問題是輸入視圖中的更改沒有反映在輸出視圖中。

var app = angular.module("app", []); 
 
app.controller('controller',function ($scope) { 
 
    $scope.val1 = 10; 
 
    $scope.val2 = 0; 
 
    $scope.val3 = 0; 
 
    $scope.val4 = 0; 
 
    $scope.cal = function() { 
 
    return parseInt($scope.val1) + parseInt($scope.val2) + parseInt($scope.val3) + parseInt($scope.val4); 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
    <head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-app="app"> 
 
    <form action="#" ng-controller="controller"> 
 
    \t \t <input type="text" ng-model="val1"><br> 
 
    \t \t <input type="text" ng-model="val2"><br> 
 
    \t \t <input type="text" ng-model="val3"><br> 
 
    \t \t <input type="text" ng-model="val4"><br> 
 
    \t \t Self:{{cal()}} 
 
    \t </form> 
 
    
 
    \t <div ng-controller="controller"> 
 
    \t Other:{{cal()}} 
 
    \t </div> 
 
    </body> 
 

 
</html>

現在我可以使它通過重新定義所有VAL1，VAL2，VAL3和VAL4輸入作爲隱藏在輸出視圖，但是，其爲醜陋溶液與冗餘代碼工作。什麼是正確的做法。

更新： 我的觀點是彼此相距很遠，並有很多代碼在他們之間生活。我不想找到一個共同的祖先div，並將它分配給控制器，因爲它將嵌套與它們之間的視圖相關聯的其他控制器。這將使我的情況複雜化。

來源

2016-08-21 Haider

快速搜索這個發現的解釋和回答另一個問題SO。

每當Angular編譯器在HTML中找到ng-controller，就會創建一個新的作用域。（如果你使用NG-視圖，每次去不同的路線的時間，創建一個新的範圍了。）

如果您需要共享控制器之間的數據，通常一個服務是您最好的選擇。把共享數據到服務，並注入服務到controlle

Using the same controller on different elements to refer to the same object

（不是我的迴應 - 請給予好評這個問題的答案，如果它可以幫助你）

來源

2016-08-21 23:28:31 AndrewP

謝謝。對不起，我可以自己搜索它，這個問題正是我所要求的。 – Haider

你有2個控制器部分的任何特定原因？你應該只用同一個控制器管理你的兩個div。

如果您希望維護2個控制器，那麼您將需要在它們之間進行通信 - 這可以通過您注入的用於存儲數據的簡單服務來完成。或者，雖然這種做法有時會被忽視，但您可以使用$ rootScope。雖然這個概念保持不變。

var app = angular.module("app", []); 
 
app.controller('controller',function ($scope) { 
 
    $scope.val1 = 10; 
 
    $scope.val2 = 0; 
 
    $scope.val3 = 0; 
 
    $scope.val4 = 0; 
 
    $scope.cal = function() { 
 
    return parseInt($scope.val1) + parseInt($scope.val2) + parseInt($scope.val3) + parseInt($scope.val4); 
 
    } 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
    <head><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css" /> 
 
    <script src="script.js"></script> 
 
    </head> 
 

 
    <body ng-app="app" ng-controller="controller"> 
 
    <form action="#" > 
 
    \t \t <input type="text" ng-model="val1"><br> 
 
    \t \t <input type="text" ng-model="val2"><br> 
 
    \t \t <input type="text" ng-model="val3"><br> 
 
    \t \t <input type="text" ng-model="val4"><br> 
 
    \t \t Self:{{cal()}} 
 
    \t </form> 
 
    
 
    \t <div > 
 
    \t Other:{{cal()}} 
 
    \t </div> 
 
    </body> 
 

 
</html>

來源

2016-08-21 21:30:19 cyberwombat

我的兩個觀點彼此相距很遠，並且大量的代碼都存在於他們之間。我不想找到一個共同的祖先div，並將它分配給控制器，因爲它將嵌套與它們之間的視圖相關聯的其他控制器。這將使我的情況複雜化。 – Haider

angularjs使用單個控制器與兩個視圖

回答

相關問題