AngularJS:如何从指令中的隔离范围更改范围值
AngularJS : How to change scope value from isolated scope within directive
如何更改指令的范围值?我试过这样:
在模板中:
<h1>{{abcd}}</h1>
<example-directive abcd="abcd"></example-directive>
在指令中
..
scope: {
abcd: '='
},
link: function($scope){
$scope.abcd = "change it pleeease";
}
....
但结果我一无所获。所以 'h1' 标签是空的....
有人知道为什么吗?
update1 - 我的完整代码
指令:
(function(){
'use strict';
var standingsDirective = function(api, $http){
return {
restrict: 'E',
scope : {
sid: '=',
loadingstatus: '='
},
templateUrl: "teams/views/standings.html",
link: function(scope){
scope.loadingstatus = "loading";
$http.get(api+'/getsomething'+scope.id).success(function(result){
scope.data = result;
if(scope.data && scope.data.length > 0){
scope.loadingstatus = "loaded";
}else{
scope.loadingstatus = "notloaded";
}
}).error(function(){
scope.loadingstatus = "notloaded";
});
}
};
};
var teamsModule = angular.module('app.teams');
teamsModule.directive('standings', ['api', '$http', standingsDirective]);
}());
一个模板文件:
...
<a ng-show="loadingstatus == 'loaded'" ng-click="subview='standing'" class="activeLink">standings - {{loadingstatus}}</a>
...
<standings sid="sid" loadingstatus="loadingstatus" ng-show="subview=='standing'"></standings>
...
嗯,应该可以,我不知道哪里出了问题,也许如果您分享更多代码,我们可以找出问题所在。
这是一个工作示例,非常简单:
http://plnkr.co/edit/eXhog9wsslyuHEZO2dOY
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
});
app.directive('exampleDirective',[function(){
return{
restrict: 'E',
scope: {
name: '='
},
link: function($scope){
$scope.name = "change it pleeease";
}
}
}]);
下面是关于在控制器和指令之间共享数据的更详细示例:
回答我的问题:
首先,非常感谢 "Fedaykin" 帮我解决他的意见。他指出它应该有效,所以问题应该出在我代码的另一部分。
发现 ng-if 属性阻止了我的指令的执行。
这是 html 代码的样子:
<a ng-show="loadingstatus == 'loaded'" ng-click="subview='standing'" class="activeLink">standings - {{loadingstatus}}</a>
<div ng-if="subview=='standing'">
...
<standings sid="sid" loadingstatus="loadingstatus" ng-show=" subview=='standing'"> </standings>
....
</div>
所以这导致了这种奇怪的行为。
我希望这个 post 能帮助其他有类似问题的人解决问题。
如何更改指令的范围值?我试过这样:
在模板中:
<h1>{{abcd}}</h1>
<example-directive abcd="abcd"></example-directive>
在指令中
..
scope: {
abcd: '='
},
link: function($scope){
$scope.abcd = "change it pleeease";
}
....
但结果我一无所获。所以 'h1' 标签是空的.... 有人知道为什么吗?
update1 - 我的完整代码
指令:
(function(){
'use strict';
var standingsDirective = function(api, $http){
return {
restrict: 'E',
scope : {
sid: '=',
loadingstatus: '='
},
templateUrl: "teams/views/standings.html",
link: function(scope){
scope.loadingstatus = "loading";
$http.get(api+'/getsomething'+scope.id).success(function(result){
scope.data = result;
if(scope.data && scope.data.length > 0){
scope.loadingstatus = "loaded";
}else{
scope.loadingstatus = "notloaded";
}
}).error(function(){
scope.loadingstatus = "notloaded";
});
}
};
};
var teamsModule = angular.module('app.teams');
teamsModule.directive('standings', ['api', '$http', standingsDirective]);
}());
一个模板文件:
...
<a ng-show="loadingstatus == 'loaded'" ng-click="subview='standing'" class="activeLink">standings - {{loadingstatus}}</a>
...
<standings sid="sid" loadingstatus="loadingstatus" ng-show="subview=='standing'"></standings>
...
嗯,应该可以,我不知道哪里出了问题,也许如果您分享更多代码,我们可以找出问题所在。
这是一个工作示例,非常简单: http://plnkr.co/edit/eXhog9wsslyuHEZO2dOY
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
});
app.directive('exampleDirective',[function(){
return{
restrict: 'E',
scope: {
name: '='
},
link: function($scope){
$scope.name = "change it pleeease";
}
}
}]);
下面是关于在控制器和指令之间共享数据的更详细示例:
回答我的问题:
首先,非常感谢 "Fedaykin" 帮我解决他的意见。他指出它应该有效,所以问题应该出在我代码的另一部分。
发现 ng-if 属性阻止了我的指令的执行。 这是 html 代码的样子:
<a ng-show="loadingstatus == 'loaded'" ng-click="subview='standing'" class="activeLink">standings - {{loadingstatus}}</a>
<div ng-if="subview=='standing'">
...
<standings sid="sid" loadingstatus="loadingstatus" ng-show=" subview=='standing'"> </standings>
....
</div>
所以这导致了这种奇怪的行为。 我希望这个 post 能帮助其他有类似问题的人解决问题。