Passing scope in template of a directive - AngularJs

Question

I am trying to set in scope in directive and get it printed. But its giving error. Can someone help?

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

//controller declaration
app.controller(function($scope){
$scope.name = "Joseph";
});

//app declaration
app.directive('myStudent',function(){
return{
	template: "Hi! Dear!! {{name}}"
}
});

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

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

</body>

ndoes · Accepted Answer · 2016-12-13 12:37:59Z

2

Your controller declaration is incomplete

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

Working plunker

answered Dec 13, 2016 at 12:37

ndoes

6785 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tom Johnson · Accepted Answer · 2016-12-13 12:40:21Z

0

You need to declare your controller properly via;

app.controller("myCtrl", ["$scope", function($scope){

$scope.name = "Joseph";
}]);

And you need to tell your directive to use this controller via;

app.directive('myStudent',function(){
    return{
        template: "Hi! Dear!! {{name}}",
        controller: "myCtrl"
    }
});

answered Dec 13, 2016 at 12:40

Tom Johnson

7015 silver badges16 bronze badges

Comments

Adrian Zelada Torrez · Accepted Answer · 2016-12-13 13:05:59Z

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


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

</body>

app.controller("myCtrl", ["$scope", function($scope){
    $scope.name="Adrian":
}]);

in directive

app.directive('myStudent',function(){
    return{
      scope:'=',
      template: "Hi! Dear!! {{name}}"
})

or

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


     <my-student name="name"></my-student> 
       <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script> 

    </body>

and your directive :

app.directive('myStudent',function(){
    return{
          scope:{
              name:'=',
          },
          template: "Hi! Dear!! {{name}}"
    })

Collectives™ on Stack Overflow

Passing scope in template of a directive - AngularJs

3 Answers 3

Comments

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Related