angular.js - Angular中的变量怎么实时更新

Question

---

DOM中count和A Controller双向绑定，而A Controller中的count值是从Service中去取的，B Controller可以改变Service中的值。
请问应该怎么实现说B改变Service中的值后DOM也能实时变化呢

Answer 1

Bagi situasi yang dinyatakan oleh poster, saya akan lebih berhati-hati dan boleh dibincangkan dalam dua situasi berikut:

Nilai yang dikongsi oleh perkhidmatan ialah objek

Pada masa ini, anda hanya perlu menetapkan nilai kepada skop seperti biasa, kerana objek diluluskan melalui rujukan, lihat contoh:
kod html:

<p ng-controller="ACtrl">
    <p>A Controller:</p>

    <p>count:{{count.number}}</p>
    <input ng-model="count.number"/>
</p>
<p ng-controller="BCtrl">
    <p>B Controller:</p>

    <p>count:{{count.number}}</p>
    <button ng-click="changeCount()">change Number To 4</button>
</p>

kod perkhidmatan:

.service('common', function () {
    this.obj = {number: 3};
});

kod pengawal:

.controller('ACtrl', function ($scope, common) {
    $scope.count = common.obj;
})

.controller('BCtrl', function ($scope, common) {
    $scope.count = common.obj;

    $scope.changeCount = function () {
        common.obj.number = 4;
    }
});

Kesan halaman:

Selepas mengklik butang tukar Nombor Kepada 4, kesan halaman ialah:

Anda boleh melihat bahawa data dikemas kini secara serentak. Mengapa kesan sedemikian boleh berlaku? Terdapat dua sebab yang sangat penting:

• perkhidmatan ialah singleton
• Objek diluluskan melalui rujukan

Satu perkara yang perlu diambil perhatian ialah sebarang perubahan dalam skop atau perkhidmatan akan menyebabkan yang lain berubah!

Nilai yang dikongsi oleh perkhidmatan ialah jenis asas

Apabila nilai kongsi adalah jenis asas, kaedah di atas tidak boleh dicapai. Kerana penetapan jenis asas melepasi nilai, bukan rujukan. Pada masa ini, interaksi antara kedua-dua pengawal mestilah didorong oleh peristiwa. Lihat kod:
kod html:

<p ng-controller="ACtrl">
    <p>A Controller:</p>

    <p>count:{{count}}</p>
    <input ng-model="count"/>
</p>
<p ng-controller="BCtrl">
    <p>B Controller:</p>

    <p>count:{{count}}</p>
    <button ng-click="changeCount()">change Number To 4</button>
</p>

kod perkhidmatan:

.service('common', function () {
    this.number = 3;
});

kod pengawal:

.controller('ACtrl', function ($scope, common) {
    $scope.count = common.number;

    $scope.$on('change', function () {
        $scope.count = common.number;
    });
})

.controller('BCtrl', function ($scope, $rootScope, common) {
    $scope.count = common.number;

    $scope.changeCount = function () {
        common.number = 4;
        $rootScope.$broadcast('change');
    }
});

Kesan halaman adalah sama seperti yang pertama.
$emit dan $broadcast antara rakan sebaya tidak boleh lulus acara dan acara disiarkan ke bawah pada rootScope.
Itu sahaja. Ia melibatkan banyak perkara.
harap membantu anda!

Answer 2

Anda perlu melihat perbezaan antara perkhidmatan dan kilang. Satu dibina dan satu lagi. Jika anda menggunakan kilang, pemprosesan dalam B akan menjejaskan A. Atau anda menggunakan penyiaran, Angular mempunyai fungsi untuk penyiaran.

Answer 3

Saya faham apa yang anda ingin tanyakan ialah, bagaimana hendak menyegerakkan DOM dengan data Skop?

Malah, {{count}} ialah monitor, yang setara dengan memanggil $scope.$watch('count',watchFunc)
Angular mengesan sama ada $scope.count berubah setiap kali ia dikemas kini dan mencetuskan watchFunc
sebaik sahaja ia berubah. Khusus untuk DOM anda, watchFunc mengemas kini textContent
Mengenai bila sudut akan dikemas kini, selepas ng-click, atau $http.get atau input onblur,
Saya baru-baru membaca Angular dan menirunya. Terdapat satu bab dalam pangkalan kod yang menerangkan cara melaksanakan pengikatan