Angular - 指令中的更新范围
Angular - update scope in Directive
我在更新指令中的范围变量时遇到问题,我不想在指令中添加 HTML,是否可以只更新范围变量的值。 get-event 链接将更新各种文本/链接/图像,但首先我只希望它更新范围变量名称
Index.jade
div(ng-controller='AppCtrl')
h2 Hello {{name}}
a(href={{link}}) test
a.playlist(get-event rel='1000') 1000
br
br
a.playlist(get-event rel='2000') 2000
br
br
a.playlist(get-event rel='3000') 3000
directive.js
angular.module('myApp.directives', [])
.directive('getEvent', function($q, $http, $templateCache){
return {
restrict: 'A',
scope: true,
link: function (scope, element, attrs) {
function loadData() {
var refId = attrs.rel;
console.log(refId);
$http.get('/api/event/'+refId, {
// cache: $templateCache
}).then(function(result) {
console.log(result);
scope.name = "NEW";
});
}
element.bind('click', function(event) {
scope.$apply(function() {
loadData();
});
});
}
}
});
controller.js
angular.module('myApp.controllers', []).
controller('AppCtrl', function ($scope, $http) {
$http({
method: 'GET',
url: '/api/event/1000'
}).
success(function (data, status, headers, config) {
$scope.name = data.title;
}).
error(function (data, status, headers, config) {
$scope.name = 'Error!';
});
});
HTML 上的作用域名称未更新,感谢您的帮助。
我设法自己解决了,我最终更改了它,所以控制器中有一个函数可以执行更新。
在控制器中
$scope.update = function(id) {
//this is just a service factory to do the http request
updateEvent.getDetails(id).success(function (result) {
$scope.name =result.title;
});
};
在指令中
element.bind('click', function(event) {
scope.$apply(function() {
scope.update(refId);
});
});
谢谢你的帮助
我在更新指令中的范围变量时遇到问题,我不想在指令中添加 HTML,是否可以只更新范围变量的值。 get-event 链接将更新各种文本/链接/图像,但首先我只希望它更新范围变量名称
Index.jade
div(ng-controller='AppCtrl')
h2 Hello {{name}}
a(href={{link}}) test
a.playlist(get-event rel='1000') 1000
br
br
a.playlist(get-event rel='2000') 2000
br
br
a.playlist(get-event rel='3000') 3000
directive.js
angular.module('myApp.directives', [])
.directive('getEvent', function($q, $http, $templateCache){
return {
restrict: 'A',
scope: true,
link: function (scope, element, attrs) {
function loadData() {
var refId = attrs.rel;
console.log(refId);
$http.get('/api/event/'+refId, {
// cache: $templateCache
}).then(function(result) {
console.log(result);
scope.name = "NEW";
});
}
element.bind('click', function(event) {
scope.$apply(function() {
loadData();
});
});
}
}
});
controller.js
angular.module('myApp.controllers', []).
controller('AppCtrl', function ($scope, $http) {
$http({
method: 'GET',
url: '/api/event/1000'
}).
success(function (data, status, headers, config) {
$scope.name = data.title;
}).
error(function (data, status, headers, config) {
$scope.name = 'Error!';
});
});
HTML 上的作用域名称未更新,感谢您的帮助。
我设法自己解决了,我最终更改了它,所以控制器中有一个函数可以执行更新。
在控制器中
$scope.update = function(id) {
//this is just a service factory to do the http request
updateEvent.getDetails(id).success(function (result) {
$scope.name =result.title;
});
};
在指令中
element.bind('click', function(event) {
scope.$apply(function() {
scope.update(refId);
});
});
谢谢你的帮助