Scope true in directive giving wrong result

Question

Scope true in directive giving wrong result

59 Views Asked by Deadpool At 19 October 2024 at 21:34

I am using scope as 'true' in a directive. So now, this directive scope passes from parent to child, but not in reverse. I am printing now scope.name 2 times. First in parent scope, second in directive. Now I should get 2 different values. But, I am getting same scope value for both. Pl help explain!

//module declaration 
var app = angular.module('myApp',[]);

//controller declaration
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
});

//app declaration
app.directive('myStudent',function(){

return{
 template: "{{name}}",
 scope:true
}
controller: [function(){
 $scope.name = "Roger"
}]

});

<body ng-app="myApp" ng-controller="myCtrl"> 

{{name}}, 

<my-student></my-student> 

</body> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>

Original Q&A

There are 3 best solutions below

Sai On 19 December 2016 at 08:47

Write your controller inside of DDO.

//app declaration
app.directive('myStudent',function(){

return{
    template: "{{name}}",
    scope:true,
    controller: ['$scope', function($scope){
        $scope.name = "Roger"
    }]
}

Probably, this will solve your problem.

Vikash Kumar On 19 December 2016 at 08:55

Easy make an object in parent controller so that it can be binded with directive i.e var x={}; x.value=value;// that you want to pass then try accessing it.

**tanmay** · Accepted Answer

Your controller is out of directive. I placed it inside and added $scope dependency. It works!

//module declaration 
var app = angular.module('myApp',[]);

//controller declaration
app.controller('myCtrl',function($scope){
$scope.name = "Peter";
});

//app declaration
app.directive('myStudent',function(){

return{
 template: "{{name}}",
 scope:true,
        controller: ['$scope', function($scope) {
            $scope.name = "Roger"
        }]
}


});

<body ng-app="myApp" ng-controller="myCtrl"> 

{{name}}, 

<my-student></my-student> 

</body> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>

Scope true in directive giving wrong result

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in ANGULARJS-SCOPE

Related Questions in ANGULAR2-DIRECTIVES

Trending Questions

Popular # Hahtags

Popular Questions