0
変数が使用可能になったときに表示しようとしていますが、表示されていません。 ボタンをクリックして関数を再度呼び出すと表示されます。 自分のコードで$ 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();
}
};
});
を私はあなたが追加していないと思います。あなたのディレクティブJSファイルがHTMLファイルにあります。 –
期待通りに動作していますか？http://plnkr.co/edit/tkoW8Icuam4BEdxmY6En?p=preview –
@VinodLouisこれは初期値を示していますが、最初に実行した関数の新しい値 – Kuiken