2015-10-07 56 views
0

我可以使用ng-model在多個視圖上構建一個對象嗎?在幾個視圖上的角度ng模型

例如,假設在廠景我有

<input ng-model='myObject.firstName'> 

而且在視圖2我有

<input ng-model='myObject.lastName'> 

而在VIEW3我有

<input ng-model='myObject.email'> 

的想法是,你可以打一個在最後一個視圖中提交按鈕,並在某處返回對象。

我最初的做法是有一個服務聲明一個空對象,然後在服務中有允許使用該服務的控制器將其視圖輸入添加到該對象然後返回該對象的函數。

但是我覺得這是相當迂迴的做法!

如果有人能指出我在正確的方向,我會很感激。

+1

如果myObject的是部分的控制器,你只會在這個控制器中更新這個對象,然後......爲什麼不呢?這將工作正常。 – Aakash

回答

2

您可以使用該服務。這裏有一個使用3個指令ng-model共享相同對象的3個控制器的例子。每個控制器修改tested.value屬性,但當然您可以使用不同的屬性。

angular.module('test', []).factory('tested', function() { 
 
    return { 
 
    value : '123' 
 
    }; 
 
}).controller('ctrl1', function($scope, tested) { 
 
    $scope.tested = tested; 
 
}).controller('ctrl2', function($scope, tested) { 
 
    $scope.tested = tested; 
 
}).controller('ctrl3', function($scope, tested) { 
 
    $scope.tested = tested; 
 
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="test"> 
 
    <div ng-controller="ctrl1"> 
 
    <input type="text" ng-model="tested.value" /> 
 
    {{ tested.value }} 
 
    </div> 
 
    
 
    <div ng-controller="ctrl2"> 
 
    <input type="text" ng-model="tested.value" /> 
 
    {{ tested.value }} 
 
    </div> 
 
    
 
    <div ng-controller="ctrl3"> 
 
    <input type="text" ng-model="tested.value" /> 
 
    {{ tested.value }} 
 
    </div> 
 
</div>

+0

酷!即將開始工作,所以稍後會讓你知道,如果這是我正在尋找的! – user2085143

+0

優秀,短小,功能齊全。通過代碼片段,這非常棒! +1 – Elo

+0

非常感謝!正是我在找什麼! +1 – user2085143

0

由於每個視圖有其控制器,來共享數據的唯一途徑是,類型爲「提供者」,「服務」或「工廠」的服務。

然後,您可以使用所討論的方法從每個控制器修改您的對象。

最後,通知每個視圖事情發生了轉變,服務方法可以提高從服務的事件:

$rootScope.$broadcast('somethingChanged', myObject); 

而且每個控制器可以用聽:

$scope.$on('somethingChanged', function(data) { 
});