AngularJS:服务-控制器-视图数据绑定
AngularJS : service - controller - view data binding
我正在尝试在服务、控制器和视图之间绑定数据。下面,我为应用程序提供了 plunker link。
基本上'dataService'都有找地理位置的功能。函数设置变量dataService.locationDone.
数据服务分配给 'HomeController' 中的 $scope.data。
在home.html中,我引用了data.locationDone的值来显示不同的标签。
问题是,在dataService中修改locationDone变量后,home.html中的labels并没有改变。
笨蛋 link: http://embed.plnkr.co/BomSztgC7PzGMzJyDKoF/preview
服务:
storelocator.factory('dataService', [function() {
var data = {
locationDone: 0,
position: null,
option: null
}
var getLocation = function() {
data.locationDone = 0;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (pos) {
data.locationDone = 1;
data.position = pos;
console.log('got location ', data.locationDone);
}, function () {
data.locationDone = 2;
});
} else {
data.locationDone = 3;
}
};
getLocation();
return data;
}]);
控制器:
storelocator.controller('HomeController', ['$scope', '$location', 'dataService', function ($scope, $location, dataService) {
$scope.data = dataService;
console.log('Home ctrl', $scope.data.locationDone);
$scope.fn = {};
$scope.fn.showOne = function () {
$scope.data.option = 3;
$location.path('/map');
};
$scope.fn.showAll = function () {
$scope.data.option = 99;
$location.path('/map');
};
}]);
查看:
<div layout="column" layout-align="start center">
<div layout="column" layout-margin layout-padding>
<div flex layout layout-margin layout-padding>
<md-whiteframe flex class="md-whiteframe-z1" layout layout-align="center center" ng-show="data.locationDone==0">
<span flex>Awaiting location information.</span>
</md-whiteframe>
<md-whiteframe flex class="md-whiteframe-z1" layout layout-align="center center" ng-show="data.locationDone==2"><span flex>Error in getting location.</span>
</md-whiteframe>
<md-whiteframe flex class="md-whiteframe-z1" layout layout-align="center center" ng-show="data.locationDone==3"><span flex>The browser does not support location.</span>
</md-whiteframe>
</div>
<md-button flex ng-show="data.locationDone==1" class="md-accent md-default-theme md-raised" ng-click="fn.showOne()">Find Nearest Three Stores</md-button>
<div flex></div>
<md-button ng-show="data.locationDone==1" flex class="md-accent md-default-theme md-raised" ng-click="fn.showAll()">Find All Stores</md-button>
</div>
</div>
您正在更新服务范围内定义的变量 locationDone
。它不会对您在服务期间(稍后更新时)返回的对象产生任何影响。而是在您的服务中预定义一个对象并更新引用而不是变量上的 属性。
另请注意,由于您使用的是本机异步 api,它超出了 angular 上下文,因此您需要通过在您的情况下执行 $rootScope.$apply()
或仅使用 [=17] 来手动调用摘要循环=] 将您的更新包装在 $timeout
中。然而更好的方法是 属性 在 dataService 中创建一个 api 方法返回 $q
promise.
有超时
.factory('dataService', ['$timeout', function($timeout) {
var service = { //Define here;
locationDone: 0,
position: null,
option: null
}
var getLocation = function() {
service.locationDone = 0;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (pos) {
$timeout(function(){
service.locationDone = 1;
service.position = pos;
});
}, function () {
$timeout(function(){
service.locationDone = 2;
});
});
} else {
service.locationDone = 3;
}
};
getLocation();
return service; //return it
}]);
使用 qpromise 实现:
.factory('dataService', ['$q', function($q) {
return {
getLocation:getLocation
};
function getLocation() {
if (navigator.geolocation) {
var defer = $q.defer();
navigator.geolocation.getCurrentPosition(function (pos) {
defer.resolve({locationDone : 1,position : pos})
}, function () {
defer.resolve({ locationDone : 2});
});
return defer.promise;
}
return $q.when({locationDone : 3});
};
}]);
在你的控制器中:
$scope.data = {};
dataService.getLocation().then(function(result){
$scope.data = result;
});
演示
angular.module('app', []).controller('HomeController', ['$scope', '$location', 'dataService', function ($scope, $location, dataService) {
$scope.data = {};
dataService.getLocation().then(function(result){
$scope.data = result;
})
console.log('Home ctrl', $scope.data.locationDone);
$scope.fn = {};
$scope.fn.showOne = function () {
$scope.data.option = 3;
$location.path('/map');
};
$scope.fn.showAll = function () {
$scope.data.option = 99;
$location.path('/map');
};
}]).factory('dataService', ['$q', function($q) {
return {
getLocation:getLocation
};
function getLocation() {
if (navigator.geolocation) {
var defer = $q.defer();
navigator.geolocation.getCurrentPosition(function (pos) {
defer.resolve({locationDone : 1,position : pos})
}, function () {
defer.resolve({ locationDone : 2});
});
return defer.promise;
}
return $q.when({locationDone : 3});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="HomeController">
<div layout="column" layout-align="start center">
<div layout="column" layout-margin layout-padding>
<div flex layout layout-margin layout-padding>
<md-whiteframe flex class="md-whiteframe-z1" layout layout-align="center center" ng-show="data.locationDone==0">
<span flex>Awaiting location information.</span>
</md-whiteframe>
<md-whiteframe flex class="md-whiteframe-z1" layout layout-align="center center" ng-show="data.locationDone==2"><span flex>Error in getting location.</span>
</md-whiteframe>
<md-whiteframe flex class="md-whiteframe-z1" layout layout-align="center center" ng-show="data.locationDone==3"><span flex>The browser does not support location.</span>
</md-whiteframe>
</div>
<md-button flex ng-show="data.locationDone==1" class="md-accent md-default-theme md-raised" ng-click="fn.showOne()">Find Nearest Three Stores</md-button>
<div flex></div>
<md-button ng-show="data.locationDone==1" flex class="md-accent md-default-theme md-raised" ng-click="fn.showAll()">Find All Stores</md-button>
</div>
</div>
</div>
我正在尝试在服务、控制器和视图之间绑定数据。下面,我为应用程序提供了 plunker link。
基本上'dataService'都有找地理位置的功能。函数设置变量dataService.locationDone.
数据服务分配给 'HomeController' 中的 $scope.data。
在home.html中,我引用了data.locationDone的值来显示不同的标签。
问题是,在dataService中修改locationDone变量后,home.html中的labels并没有改变。
笨蛋 link: http://embed.plnkr.co/BomSztgC7PzGMzJyDKoF/preview
服务:
storelocator.factory('dataService', [function() {
var data = {
locationDone: 0,
position: null,
option: null
}
var getLocation = function() {
data.locationDone = 0;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (pos) {
data.locationDone = 1;
data.position = pos;
console.log('got location ', data.locationDone);
}, function () {
data.locationDone = 2;
});
} else {
data.locationDone = 3;
}
};
getLocation();
return data;
}]);
控制器:
storelocator.controller('HomeController', ['$scope', '$location', 'dataService', function ($scope, $location, dataService) {
$scope.data = dataService;
console.log('Home ctrl', $scope.data.locationDone);
$scope.fn = {};
$scope.fn.showOne = function () {
$scope.data.option = 3;
$location.path('/map');
};
$scope.fn.showAll = function () {
$scope.data.option = 99;
$location.path('/map');
};
}]);
查看:
<div layout="column" layout-align="start center">
<div layout="column" layout-margin layout-padding>
<div flex layout layout-margin layout-padding>
<md-whiteframe flex class="md-whiteframe-z1" layout layout-align="center center" ng-show="data.locationDone==0">
<span flex>Awaiting location information.</span>
</md-whiteframe>
<md-whiteframe flex class="md-whiteframe-z1" layout layout-align="center center" ng-show="data.locationDone==2"><span flex>Error in getting location.</span>
</md-whiteframe>
<md-whiteframe flex class="md-whiteframe-z1" layout layout-align="center center" ng-show="data.locationDone==3"><span flex>The browser does not support location.</span>
</md-whiteframe>
</div>
<md-button flex ng-show="data.locationDone==1" class="md-accent md-default-theme md-raised" ng-click="fn.showOne()">Find Nearest Three Stores</md-button>
<div flex></div>
<md-button ng-show="data.locationDone==1" flex class="md-accent md-default-theme md-raised" ng-click="fn.showAll()">Find All Stores</md-button>
</div>
</div>
您正在更新服务范围内定义的变量 locationDone
。它不会对您在服务期间(稍后更新时)返回的对象产生任何影响。而是在您的服务中预定义一个对象并更新引用而不是变量上的 属性。
另请注意,由于您使用的是本机异步 api,它超出了 angular 上下文,因此您需要通过在您的情况下执行 $rootScope.$apply()
或仅使用 [=17] 来手动调用摘要循环=] 将您的更新包装在 $timeout
中。然而更好的方法是 属性 在 dataService 中创建一个 api 方法返回 $q
promise.
有超时
.factory('dataService', ['$timeout', function($timeout) {
var service = { //Define here;
locationDone: 0,
position: null,
option: null
}
var getLocation = function() {
service.locationDone = 0;
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function (pos) {
$timeout(function(){
service.locationDone = 1;
service.position = pos;
});
}, function () {
$timeout(function(){
service.locationDone = 2;
});
});
} else {
service.locationDone = 3;
}
};
getLocation();
return service; //return it
}]);
使用 qpromise 实现:
.factory('dataService', ['$q', function($q) {
return {
getLocation:getLocation
};
function getLocation() {
if (navigator.geolocation) {
var defer = $q.defer();
navigator.geolocation.getCurrentPosition(function (pos) {
defer.resolve({locationDone : 1,position : pos})
}, function () {
defer.resolve({ locationDone : 2});
});
return defer.promise;
}
return $q.when({locationDone : 3});
};
}]);
在你的控制器中:
$scope.data = {};
dataService.getLocation().then(function(result){
$scope.data = result;
});
演示
angular.module('app', []).controller('HomeController', ['$scope', '$location', 'dataService', function ($scope, $location, dataService) {
$scope.data = {};
dataService.getLocation().then(function(result){
$scope.data = result;
})
console.log('Home ctrl', $scope.data.locationDone);
$scope.fn = {};
$scope.fn.showOne = function () {
$scope.data.option = 3;
$location.path('/map');
};
$scope.fn.showAll = function () {
$scope.data.option = 99;
$location.path('/map');
};
}]).factory('dataService', ['$q', function($q) {
return {
getLocation:getLocation
};
function getLocation() {
if (navigator.geolocation) {
var defer = $q.defer();
navigator.geolocation.getCurrentPosition(function (pos) {
defer.resolve({locationDone : 1,position : pos})
}, function () {
defer.resolve({ locationDone : 2});
});
return defer.promise;
}
return $q.when({locationDone : 3});
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="HomeController">
<div layout="column" layout-align="start center">
<div layout="column" layout-margin layout-padding>
<div flex layout layout-margin layout-padding>
<md-whiteframe flex class="md-whiteframe-z1" layout layout-align="center center" ng-show="data.locationDone==0">
<span flex>Awaiting location information.</span>
</md-whiteframe>
<md-whiteframe flex class="md-whiteframe-z1" layout layout-align="center center" ng-show="data.locationDone==2"><span flex>Error in getting location.</span>
</md-whiteframe>
<md-whiteframe flex class="md-whiteframe-z1" layout layout-align="center center" ng-show="data.locationDone==3"><span flex>The browser does not support location.</span>
</md-whiteframe>
</div>
<md-button flex ng-show="data.locationDone==1" class="md-accent md-default-theme md-raised" ng-click="fn.showOne()">Find Nearest Three Stores</md-button>
<div flex></div>
<md-button ng-show="data.locationDone==1" flex class="md-accent md-default-theme md-raised" ng-click="fn.showAll()">Find All Stores</md-button>
</div>
</div>
</div>