CODEWITHSUNDEEP
javascriptangularjsangularjs-directiveangularjs-scope
user3711239
user3711239

Reputation: 41

Angularjs Scope Issue with Directive

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.

Upvotes: 0

Views: 132

Answers (2)

Konstantin Krass
Konstantin Krass

Reputation: 8646

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>

Upvotes: 1

Michael Kang
Michael Kang

Reputation: 52867

Remove curlies:

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

Upvotes: 0

Related Questions