AngularJS directive: scope

Question

I have the example below:

HTML:

<body ng-controller="MainCtrl">
    <p>Hello {{name}}!</p>
    <p>Result is {{result}}!</p>
    <output-content data="name"></output-content>
</body>

JavaScript:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
    $scope.name = 'World';
    $scope.result = "no";

    $scope.changeLabel = function() {
        $scope.result = 'yes';
    }
});

app.directive('outputContent', function() {
    return {
        restrict: 'E',
        replace: true,
        templateUrl: 'outputContent.html',
        scope: {
            data: '=',
            result: '='
        },
        controller: 'MainCtrl'
    };

});

outpuContent.html:

<div>
    {{data}}
    <button ng-click="changeLabel()">Change</button>
</div>

Plunker is: http://plnkr.co/edit/uzSrGcyQLeRNEIH7IXBf

I would like the result to be 'yes' when I click on the 'Change' button.

It doesn't work.

Could you please explain to me how to write the directive to do so ?

Regards.

I'm not sure about the complete directive but you output {{data}} in outputContent.html while the changeLabel() function updates $scope.result. — Peter
– Peter, Commented May 25, 2015 at 12:17

Valentin Blokhin · Accepted Answer · 2015-05-25 13:11:11Z

3

You define variable in directive scope, but do not pass it. Just pass "result" into directive. E.g:

<output-content data="name" result="result"></output-content>

I forked your plunkr: http://plnkr.co/edit/12FXjUsVdPXhPIQ1mlHt?p=preview

Hope it helpful.

answered May 25, 2015 at 13:11

Valentin Blokhin

5151 gold badge6 silver badges16 bronze badges

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

1 Comment

Valentin Blokhin Over a year ago

I was pleased to help you.

Venkatesh TR · Accepted Answer · 2015-05-25 12:20:01Z

2

In directive, delete scope . Now like This.. this will be work..

app.directive('outputContent', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'outputContent.html',
    controller: 'MainCtrl'
  };

});

answered May 25, 2015 at 12:20

Venkatesh TR

785 bronze badges

Comments

Parthipan S · Accepted Answer · 2015-05-25 12:35:01Z

1

Scope is not needed. Kindly delete the scope.

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.name = 'World';
  $scope.result = "no";

  $scope.changeLabel = function() {
    $scope.result = 'oh yeah';
  }
});

app.directive('outputContent', function() {
  return {
    restrict: 'E',
    replace: true,
    templateUrl: 'outputContent.html',
      controller: 'MainCtrl'
  };

});

answered May 25, 2015 at 12:35

Parthipan S

1809 bronze badges

1 Comment

user3181983 Over a year ago

But I need the isolated scope for 'data'.

Collectives™ on Stack Overflow

AngularJS directive: scope

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related