ng-modelがコントローラから表示に更新されていません

Question

in this plunk私は先週から直面している問題のデモを行いました。コードスニペットには、ページ1とページ2の2つの異なるページが含まれ、と同じコントローラを使用するブートストラップタブが含まれています。 Page1にはng-repeatがあり、そこからオプションをクリックすると、コントローラ機能のvm.edit（selected_variable）にヒットし、Page2にng-model = "vm.name"という単純な入力ボックスが表示されます。私の問題は、ng-nameがvm.edit関数がそれを更新するときに値で更新または置き換えられないということです。 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> 

PAGE2：

<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); 
    }; 

編集機能はpage1にvm.nameを更新しますが、ページ2には反映されません。この問題は解決できませんでした。

Answer 1

コントローラ間で通信するには、$ broadcastイベントを使用してデータを転送できます。ここに編集されたPlunkerがあります。

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

：あなたのコントローラに $ rootScope依存関係を追加することを忘れないでください。また

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

：

vm.edit機能レジスタ放送内側と同じコントローラでイベントに耳を傾けます

注：ここで$ 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 - それらは同じコントローラを使用していません。彼らは同じコントローラの2つの異なるインスタンスを使用しています。

同じコントローラインスタンスを使用する場合は、親にng-controller="appCtrl as vm"を設定します。そうでなければ、あなたはrootScopeまたはservice

Demo

Answer 4

を使用することができますあなたはちょうど2つのコンポーネントを追加する必要があり、PageComponentとPageContainerComponentは言います。 PageContainerComponentは、タブを含むマスターページに配置されます。 PageComponentはPageContainerComponentを親として必要とし、ページのロジックを含みます。

次に、PageComponentコンポーネントにアクセスできるので、共有したいものを単純にPageContainerComponentに配置できます。 PageContainerComponentをPageComponentの変数として使用できるようにする場合は、ページビューのPageContainerComponentに直接バインドすることもできます。このような

何か：

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になければならないので、私は実際にはポイントを見ません。