Change root scope - angularjs

Question

I have some issues with directive scopes...
wall.directive('onPaste', function() {
return{
restrict: 'A',
scope :true,
controller: function($scope, $http) {
$scope.getUrlInfos = function() {
$http({
method: 'POST',
data: {
firstPost: $scope.firstPost,
lastPost: $scope.lastPost
},
url: '/wall/json/parseUrl.json'
}).success(function(data){
$scope.firstPost = 99;
$scope.parseUrl = data; // response data
console.log($scope);
});
}
},
link: function (scope, element, attrs, parentCtrl) {
element.bind("paste", function(event) {
var element = this;
setTimeout(function () {
var text = $(element).val();
urls = findUrls(text);
scope.$apply(function(){
scope.firstPost = 10;
scope.getUrlInfos();
})
}, 100);
});
}
};
});
When I console.log($scope); the variable has all the scope... but as I understand it is a copy of the root scope. Any change to this scope doesn't appear on the screen. How can I return this scope to the root scope?

Answer 1

Assume that you have a defined root scope,
wall.run(function($rootScope){
$rootScope.firstPost = 1;
//.....
});
In AngularJS, $scopes prototypically inherit from their parent scope, all the way up to $rootScope. In JavaScript, primitive types are overwritten when a child changes them. So when you set $scope.firstPost in one of your controllers, the property on $rootScope was never touched, but rather a new visible property was added to the current scope.
So you need to pass the rootScope to directive controller,then change from there.
wall.directive('onPaste', function() {
return{
restrict: 'A',
scope :true,
controller: function($scope, $rootScope, $http) {
$scope.getUrlInfos = function() {
$http({
method: 'POST',
data: {
firstPost: $rootScope.firstPost,
lastPost: $rootScope.lastPost
},
url: '/wall/json/parseUrl.json'
}).success(function(data){
$rootScope.firstPost = 99;
$rootScope.parseUrl = data; // response data
console.log($rootScope);
});
}
},
link: function (scope, element, attrs, parentCtrl) {
element.bind("paste", function(event) {
var element = this;
setTimeout(function () {
var text = $(element).val();
urls = findUrls(text);
scope.$apply(function(){
scope.firstPost = 10;
scope.getUrlInfos();
})
}, 100);
});
}
};
});