AngularJS: How to change scope value from isolated scope inside directive
How do I change the scope value from a directive? I tried this way:
in the template:
<h1>{{abcd}}</h1>
<example-directive abcd="abcd"></example-directive>
in directive
..
scope: {
abcd: '='
},
link: function($scope){
$scope.abcd = "change it pleeease";
}
....
but as a result I didn't get anything back. Thus, the "h1" tag is empty. Does anyone know why?
update1 is my complete code
Directive
(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]);
} ());
template file:
...
<a ng-show="loadingstatus == 'loaded'" ng-click="subview='standing'" class="activeLink">standings - {{loadingstatus}}</a>
...
<standings sid="sid" loadingstatus="loadingstatus" ng-show="subview=='standing'"></standings>
...
source to share
Answering my question:
First of all, many thanks to "Fedaykin" for helping me with his comments. He was the one who pointed out that it should work, so the problem must be in another part of my code.
Found out that the ng-if attribute blocked my directive from being executed. This is what the HTML looked like:
<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>
So this caused this weird behavior. I hope this post helps other guys to solve the problem if they have a similar one.
source to share
Well it should work, I don't know what might be wrong, maybe if you share more of your code we can pinpoint the problem.
Here's a working example, very simple: 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";
}
}
}]);
And here's a more detailed example of sharing data between controllers and directives:
source to share