View not updating when scope is changed inside a directive

Question

How can I update the scope from a directive? Here's a sample code showing what I want.

html

<div ng-controller="sampleController">
    <sample-directive></sample-directive>
    {{message}}
</div>

js

var app = angular.module('sample')
    .controller('sampleController',function($scope){
        $scope.message = "Foo";
        $scope.bar = function(){
            $scope.message = "Bar";
        }
    }).directive("sampleDirective",function(){

        return {
            controller : "sampleController",
            restrict : "E",
            template : "<button type='button' ng-click='bar()'></button>"
        }
    });

When the button is clicked the $scope.message is changed to bar but the view is not updated.(answered)

Here's another scenario:

html

<div ng-controller="sampleController as sc">
    <sample-directive message="bar"></sample-directive>
    {{sc.message}}
</div>

js

var app = angular.module('sample')
    .controller('sampleController',function(){
       var sc = this;
       sc.message = "foo";
       sc.bar = function(){
          //change the sc.message to value that is passed to the message attribute in the sample directive
       }
    }).directive("sampleDirective",function(){
        return {
          restrict : "E",
          template : "<button type='button' ng-click='sc.bar()'></button>",
          scope : {
            message : "@"  //how can I pass this to the sc.message scope?
          }
        }
    })

just inject `$scope in your controller` – RIYAJ KHAN Jul 05 '16 at 12:35 — RIYAJ KHAN, Jul 05 '16 at 12:35

marton · Accepted Answer · 2016-07-05T12:50:22.437

2

You didn't inject $scope into your controller.

.controller('sampleController',function($scope) {
  ...
}

You are creating two instances of your controller: One here: <div ng-controller="sampleController"> The other one for the directive controller : "sampleController",

Each instance will have a different $scope, so when you call bar() inside the directive, it will update $scope.message in the directive's scope, but not outside of it.

You can omit controller : "sampleController", then you will have only one scope. (Although your directive will only work inside <div ng-controller="sampleController">)

edited Jul 05 '16 at 12:50

answered Jul 05 '16 at 12:34

marton

1,300
8
16

sorry but I forgot to add the $scope to the controller. I've edited the question with the included scope – Dujndaf Jul 05 '16 at 12:38
omitting the controller : "sampleController" still does not update the $scope.message to bar. – Dujndaf Jul 05 '16 at 12:56
1

@Dujndaf it definitely does here http://plnkr.co/edit/AeX3waJXKHbmnhErzR0Y?p=preview Perhaps you have isolated scope not shown but based on limited code in question this answer is correct – charlietfl Jul 05 '16 at 13:01
@charlietfl Sorry I didn't test it properly so I didn't notice the change but @ marton 's answer is definitely correct. One more thing though, how about when I'm using a controller as? – Dujndaf Jul 05 '16 at 13:14
@Dujndaf, i think you will find the answer here helpful: http://stackoverflow.com/questions/14050195/angularjs-what-is-the-difference-between-and-in-directive-scope To keep the question useful for future bypassers, please do not keep expanding it, but open new ones if you have further questions. – marton Jul 05 '16 at 13:48

View not updating when scope is changed inside a directive

1 Answers1