角度模型不更新視圖

Question

我試圖顯示一個可用的變量，但沒有顯示。 它僅在我單擊按鈕再次調用該函數時顯示。 沒有在我的代碼中使用$ scope。 並做了一些（也許）奇怪的嘗試來使它起作用。

誰能弄清楚為什么它沒有立即顯示？

HTML：

    <body ng-app="LocApp">
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js"></script>

    <info>

    </info>
</body>

JS：

angular.module('LocApp', [])
    .directive('info', function infoDirective(){

        return {
            restrict: 'E',
            scope: {},
            template: '<button ng-click="LocaCtrl.getLoc()">Get location</button><h1>{{LocaCtrl.dif | number:2}}</h1><h3 style="color: red;">{{LocaCtrl.error}}</h3>',
            bindToController: {
                dif: '<',
                error: '<'
            },
            require: ['info'],
            controller: function(){
                console.log('test');

                var controller = this;
                controller.dif = 0;

                controller.toRad = function(val){
                    return val * Math.PI / 180;
                };

                controller.calcDif = function(lat1, lon1){
                    console.log("Latitude:", lat1);
                    console.log("Longitude:", lon1);

                    var lat2 = 52.099233999999996;
                    var lon2 = 5.0651474;

                    var R = 6371e3; // metres
                    var rad1 = controller.toRad(lat1);
                    var rad2 = controller.toRad(lat2);
                    var deltRad = controller.toRad(lat2-lat1);
                    var deltLamb = controller.toRad(lon2-lon1);

                    var a = Math.sin(deltRad/2) * Math.sin(deltRad/2) +
                            Math.cos(rad1) * Math.cos(rad2) *
                            Math.sin(deltLamb/2) * Math.sin(deltLamb/2);
                    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));   
                    return R * c;
                };

                controller.getLoc = function(){
                    navigator.geolocation.getCurrentPosition(function(position) {
                        let lat1 = position.coords.latitude;
                        let lon1 = position.coords.longitude;
                        controller.dif = controller.calcDif(lat1, lon1);
                        console.log("dif",controller.dif);
                    }, function(error){
                        console.log(error);
                    });
                };
            },
            controllerAs: 'LocaCtrl',
            link: function(scope, element, attrs, ctrls){
                ctrls[0].getLoc();
            }
        };
    });

Answer 1

建議我使用$ apply。 我認為更新$ scope變量是一回事，但這不是它的工作原理。 每次調用本地的角度ajax調用，事件或超時時，$ apply都會被angular調用。 所有受影響的變量都會更新到視圖。

$ apply不會在非本地Ajax調用（例如我的位置api調用）上調用。 因此，必須手動調用它以使用新值更新視圖。

因此，通過調用$ scope。$ apply（function（）{my code}，它已更新：D

感謝Vinod使我更仔細地閱讀文檔。

角度模型不更新視圖

問題描述

1 個解決方案

解決方案1
0 已采納 2017-04-12 13:48:30

角度模型不更新視圖

問題描述

1 個解決方案

解決方案1 0 已采納 2017-04-12 13:48:30

解決方案1
0 已采納 2017-04-12 13:48:30