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都会被调用。所有受影响的变量都将更新到视图中。

$ apply不会调用本地ajax调用，例如我的位置api调用。因此必须手动调用它以使用新值更新视图。

所以通过调用$ scope。$ apply（function（）{my code}它已更新：D

感谢Vinod让我仔细看看文档。

角度模型不更新视图

1 个答案: