Angularjs Scope Issue with Directive

Question

I have a directive, form where the rest of the html is given. The directive is given below

THis is the html for directive

  <div test
  input="{{guage.input}}"
  >
  </div>

angular.module('test', [])

        .directive('test', function () {
            "use strict";

            return {

                restrict: 'A',

                scope: {
                    input: '='
                },

                templateUrl: 'gauge/gauge.tpl.html',

                replace: true
    });

The below is the html loaded after the directive compilation.

<div ng-controller="Testing">
<div>
    <div id="{{guageid}}" class="gauge ng-isolate-scope" ng-model="gauge.input" data-service="/api/getDataResult/core-mon-status" guageid="fleet_online" description="Fraction of fleet online" unit="%" test="{{gauge.test}}" input="{{gauge.input}}" gauge="">
    </div>
</div>
</div>

Now I have a parent controller above this dom element name is Testing.

From my controller if I change the {{guage.input}} its not displaying.

This is my controller

app.controller('Testing',['$scope','newdataLoad','$timeout',function($scope, newdataLoad, $timeout){
        $scope.gauge = {};
$scope.gauge.input = 0;
});

What is the problem with my scope here.

excuse my question but what does '=?' in the scope definition means? — Dayan Moreno Leon
– Dayan Moreno Leon, Commented Jun 12, 2014 at 14:28

Konstantin Krass · Accepted Answer · 2014-06-12 14:48:54Z

1

As your scope defines the input with = you dont need the expression brackets.

<div test input="guage.input">

Using expression brackets will break the 2-way binding.

Optimization:

You can completely move you controller into the directive and still make use of the dependency injection

 "use strict"; 
    angular.module('test', []).directive('test', function () {   
       return {    
            restrict: 'A',    
            scope: {
              input: '='
            },    
            templateUrl: 'gauge/gauge.tpl.html',    
            replace: true,
            controller: function($scope, newdataLoad, $timeout){
               $scope.gauge = {};
               $scope.gauge.input = 0;
            }
       }
    });

The template code then :

<div>
    <div id="{{guageid}}" class="gauge ng-isolate-scope" ng-model="gauge.input" data-service="/api/getDataResult/core-mon-status" guageid="fleet_online" description="Fraction of fleet online" unit="%" test="{{gauge.test}}" input="{{gauge.input}}" gauge="">
    </div>
</div>

edited Jun 12, 2014 at 14:48

answered Jun 12, 2014 at 14:32

Konstantin Krass

8,6461 gold badge20 silver badges24 bronze badges

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

6 Comments

Marc Kline Over a year ago

This may not be the only problem, but it certainly is one.

user3711239 Over a year ago

Hello, I got it working by making the changes. But This directive is there on multiple elements. And $watch triggers even if we change specific element.

Konstantin Krass Over a year ago

$watch on what, which specific element?

user3711239 Over a year ago

I have multiple divs with same directive, so when specific change occurs in one place all the other elements are also updated. Say I change the guage value of 1 all other places also the guage value changes.

Konstantin Krass Over a year ago

sure, because all directives are bound to variable gauge.input. if you have multiple different gauges, you need an other data structure or something

|

Michael Kang · Accepted Answer · 2014-06-12 14:33:07Z

0

Remove curlies:

<div test input="guage.input">
</div>

answered Jun 12, 2014 at 14:33

Michael Kang

53k16 gold badges108 silver badges138 bronze badges

Collectives™ on Stack Overflow

Angularjs Scope Issue with Directive

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related