ng-model沒有從控制器更新到查看

Question

in this plunk我已經爲我上週面臨的問題做了一個演示。代碼片段包含引導選項卡，其包括兩個不同的頁面 - page1和page2並且它們使用相同的控制器。 Page1有ng-repeat，當我們從那裏點擊選項時，它在控制器函數vm.edit（selected_variable）中被擊中，並且Page2有一個簡單的輸入框，其具有ng-model =「vm.name」。我的問題是，當vm.edit函數更新它時，ng-name不會被更新或替換爲值。我可以使用rootScope來解決這個問題，但我不想使用rootScope。我只是想避免rootScope並想使用vm。

我的代碼例如：

第1頁：

<div ng-controller="appCtrl as vm"> 
    <div> 
    <ul> 
     <li ng-repeat="list in vm.list track by $index"> 
     <button type="button" class="btn-u btn-brd btn-u-none" ng-click="vm.edit(list, $index)" data-toggle="tab" href="#page2"> 
        {{ list.name }} 
       </button> 
     </li> 
    </ul> 
    </div> 
</div> 

第2頁：

<div ng-controller="appCtrl as vm"> 
    <input type="text" ng-model="vm.name"> 
</div> 

控制器：

vm.edit = function(listItem, index) { 
    vm.name = listItem.name; 

    console.log(vm.name); 
    }; 

編輯功能更新vm.name in page1但它不反映在page2中。無法解決這個問題，任何想法？

Answer 1

爲了在控制器之間進行通信，您可以使用$ broadcast事件來傳輸數據。這裏是編輯的Plunker。

內vm.edit功能寄存器廣播和收聽同一控制器事件：

vm.edit = function(listItem, index) { 
    $rootScope.$broadcast("vm name: changed", listItem.name); 
}; 
$scope.$on("vm name: changed", function(evt, obj){ 
    vm.name = obj; 
}); 

而且不要忘了$ rootScope依賴添加到您的控制器：

app.controller('appCtrl', function($scope, $rootScope) {...}); 

注意：這裏$ rootScope僅用於觸發事件，但不用於存儲該值。

Answer 2

page1.html

<div ng-controller="appCtrl"> 
<div> 
<ul> 
    <li ng-repeat="listitem in list track by $index"> 
    <button type="button" class="btn-u btn-brd btn-u-none" ng-click="edit(listitem, $index)" data-toggle="tab" href="#page2"> 
     {{ listitem.name }} 
    </button> 
    </li> 
</ul> 
</div> 
</div> 

page2.html

<div ng-controller="appCtrl"> 
<div> 
<ul> 
    <li ng-repeat="listitem in list track by $index"> 
    <button type="button" class="btn-u btn-brd btn-u-none" ng-click="edit(listitem, $index)" data-toggle="tab" href="#page2"> 
     {{ listitem.name }} 
    </button> 
    </li> 
</ul> 
</div> 
</div> 

的script.js

var app = angular.module('app', []); 
app.controller('appCtrl', function($scope, $compile) { 
var vm = this; 
// List 
$scope.list = [ 
    { 
    'id': 1, 
    'name': 'afroza' 
    }, 
    { 
    'id': 2, 
    'name': 'yasmin' 
    } 
]; 
// edit function 
$scope.edit = function(listItem, index) { 


    $scope.name = listItem.name; 

    //this one is very important 
    $compile(angular.element(document.querySelector('#name')))($scope); 

}; 

}); 

Please check Demo

Answer 3

page1 and page2 and they are using same controller - 他們沒有使用相同的控制器。他們正在使用同一控制器的兩個不同實例。

如果你想使用相同的控制器實例，你可以在父進程上做ng-controller="appCtrl as vm"。否則，你可以使用rootScope或service

Demo

Answer 4

你應該只增加兩個組件，說PageComponent和PageContainerComponent。 PageContainerComponent被放入包含選項卡的主頁面中。 PageComponent需要PageContainerComponent作爲父項幷包含頁面的邏輯。

然後，您可以簡單地將任何想要共享的內容放在PageContainerComponent中，因爲PageComponent可以訪問它。如果您甚至可以直接將事件綁定到頁面視圖中的PageContainerComponent，從而使PageContainerComponent可作爲PageComponent上的變量提供。

事情是這樣的：

angular.module('app').component('pageContainerComponent', { 
    controller: function() { 
     this.someProperty = 'yay'; 
    }, 
    template: '<div ng-transclude></div>' 
}); 

angular.module('app').component('page1Component', { 
    controller: function() { 
     // This controller will now have a property tabsCtrl 
     // With the controller for pageContainerComponent 
    }, 
    controllerAs: 'vm', 
    template: '<div>Page 1 content {{vm.tabsCtr.someProperty}}</div>', 
    require: { 
     tabsCtrl: '^myTabs' 
    }, 
}); 

用法應該是這樣的

<page-container-component> 
    <div class="someTabClass"> 
     <page1-component></page1-component> 
    </div> 
</page-container-component> 

這都是從我的頭頂，所以有可能是一個錯字這裏或那裏，但我希望它有幫助。

編輯

哦，差點忘記了，你可以ofcourse使用相同的控制器功能的page1Component和page2Component，使幾頁用相同的控制器邏輯，但不同的看法。儘管我不明白這一點，因爲'共享邏輯'應該在pageContainerComponent中。