12

AngularJS の同じコントローラーを参照する html コードに 2 つの異なる div タグがあります。私が疑うのは、これらの div はネストされていないため、それぞれがコントローラーの独自のインスタンスを持っているため、両方でデータが異なるということです。

<div ng-controller="AlertCtrl">
<ul>
    <li ng-repeat="alert in alerts">
        <div class="span4">{{alert.msg}}</div>
    </li>
</ul>
</div>        
<div ng-controller="AlertCtrl">
<form ng-submit="addAlert()">
    <button type="submit" class="btn">Add Alert</button>
</form>
</div>

これは、最初の div にボタンを含めることで簡単に修正できることはわかっていますが、これは、私が達成しようとしていることを伝えるための非常にクリーンでシンプルな例だと思います。ボタンを押してアラート配列に別のオブジェクトを追加した場合、変更は最初の div に反映されません。

function AlertCtrl($scope) {

$scope.alerts = [{
    type: 'error',
    msg: 'Oh snap! Change a few things up and try submitting again.'
}, {
    type: 'success',
    msg: 'Well done! You successfully read this important alert message.'
}];

$scope.addAlert = function() {
    $scope.alerts.push({
        type: 'sucess',
        msg: "Another alert!"
    });
};
}
4

2 に答える 2

18

これは非常によくある質問です。最善の方法は、サービス/価値を作成し、その間で共有することです。

mod.service('yourService', function() {
  this.sharedInfo= 'default value';
});


function AlertCtrl($scope, yourService) {
  $scope.changeSomething = function() {
    yourService.sharedInfo = 'another value from one of the controllers';
  }

  $scope.getValue = function() {
    return yourService.sharedInfo;
  }
}

<div ng-controller="AlertCtrl">{{getValue()}}</div>
<div ng-controller="AlertCtrl">{{getValue()}}</div>
于 2013-03-02T04:12:33.023 に答える
1

私が質問を正しく理解していれば、2 つの html 領域を同じコントローラーで同期し、データの同期を維持したいと考えています。

これらの div はネストされていないため、それぞれがコントローラーの独自のインスタンスを持っているため、データは両方で異なります

同じエイリアスでコントローラーを宣言する場合、これは当てはまりません（私はより最近のAngularバージョンを使用しています）：

<div ng-controller="AlertCtrl as instance">
  {{instance.someVar}}
</div>
<div ng-controller="AlertCtrl as instance">
  {{instance.someVar}} (this will be the same as above)
</div>

ただし、それらを異なるものにして相互に通信したい場合は、異なるエイリアスを宣言する必要があります。

<div ng-controller="AlertCtrl as instance1">
  {{instance1.someVar}}
</div>
<div ng-controller="AlertCtrl as instance2">
  {{instance2.someVar}} (this will not necessarily be the same as above)
</div>

次に、サービスまたはブロードキャストを使用して、それらの間で通信できます (2 番目は避ける必要があります。難しいです)。

于 2016-07-18T02:19:45.710 に答える