CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
Sudharshan Viswanathan
Sudharshan Viswanathan

Reputation: 70

Scope variable inside directive is not showing the value

I am half assured that this question is going to be down voted for not having thoroughly researched SO for similar issues. The issue is the following

script.js

'use strict';
angular.module('myApp', [])
.directive('infoDirective', function(){
return {
    scope: { test: '='},
    controller: function($scope){console.log("array-info", $scope); },
};
});

angular.module('myApp')
.controller('myCtrl', function($scope) {

  console.log($scope);
});

index.html

<div class='col-md-12'>

    <h1 >Test</h1>
    <div info-directive test="'alpha'">Variable test = {{ test }}</div>

</div>

output

Test
Variable test =

Even though the log associated with the one marked array-info does show the scope variable having a test variable with value as "alpha", the html expression doesn't evaluate to anything as shown above.

I have tried reading about the scope inheritance - but I don't think I completely understand the difference enough to debug this issue/ I am looking at the wrong topic to debug this.

Any help would be much appreciated! Plunkr

Thanks Sud

Upvotes: 1

Views: 2086

Answers (2)

Robin-Hoodie
Robin-Hoodie

Reputation: 4984

What you're trying to do is transclude content into the directive. To do that you need to add a transclude property and an ng-transclude tag into your template.

Also, the {{test}} you're seeing there is in the controller's scope, NOT the directives scope. The directive's scope is in the template|templateUrl property of the directive.

Since the {{test}} is in the controller scope, you need to add an actual test property to the controller scope in order for it to work.

http://plnkr.co/edit/nCZqjHqm9VQqISOnCdNu?p=info

'use strict';

angular.module('myApp', [])
  .directive('infoDirective', function(){
    return {
        scope: { test: '='},
        controller: function($scope){console.log("array-info", $scope); },
        template: '<ng-transclude></ng-transclude>', //infoDirective $scope
        transclude: true
    };
});

angular.module('myApp')
    .controller('myCtrl', function($scope) {
      $scope.test = 'alpha';
      console.log($scope);
    });


<div class='row'>
        <div class='col-md-12'>

          <h1 >Test</h1>
          <div info-directive test="test">
            Variable test = {{ test }} <!-- myCtrl $scope -->
            </div>

        </div>
      </div>

If you'd like to show the test property of the directive scope, move the content between the directive's tag to the template of the directive:

http://plnkr.co/edit/sKCz3OpVPTZP9OJb0U8d?p=preview

'use strict';

angular.module('myApp', [])
  .directive('infoDirective', function(){
    return {
        scope: { test: '='},
        controller: function($scope){console.log("array-info", $scope); },
        template: 'Variable test = {{ test }}'
    };
});

angular.module('myApp')
    .controller('myCtrl', function($scope) {

      console.log($scope);
    });

EDIT: Naturally you can also use combine a directive with a template and transclusion.

http://plnkr.co/edit/QviGc8w2M97ZhU8iyDjj?p=preview

'use strict';

angular.module('myApp', [])
  .directive('infoDirective', function(){
    return {
        scope: { test: '='},
        controller: function($scope){console.log("array-info", $scope); },
        template: '<div>Variable test = {{test}} in infoDirective</div><ng-transclude></ng-transclude>',
        transclude: true
    };
});

angular.module('myApp')
    .controller('myCtrl', function($scope) {
      $scope.test = 'alpha';
      console.log($scope);
    });


<div info-directive test="test">Variable test = {{ test }} from myCtrl</div>

Upvotes: 1

Joey Etamity
Joey Etamity

Reputation: 866

You need to add <div ng-controller="myCtrl"> out of the Html

Something like this :

<div ng-controller="myCtrl">


<h1 >Test</h1>
<div info-directive test="'alpha'">Variable test = {{ test }}</div>

Please check demo: http://jsfiddle.net/Lvc0u55v/7056/

For your Plunkr demo, you need to use the right angular version:

Change

<script data-require="[email protected]" data-semver="1.3.1" src="//code.angularjs.org/1.3.1/angular.js"></script>

to

<script data-require="[email protected]" src="https://code.angularjs.org/1.3.20/angular.js" data-semver="1.3.20"></script>

Upvotes: 0

Related Questions