CODEWITHSUNDEEP
angularjscustom-directive
Siti Afiqah Ismail
Siti Afiqah Ismail

Reputation: 11

Custom directive dom not change when parent scope make changes using {{}} with @ attribute

I am creating a custom directive with isolate scope using interpolation ({{}}) from parent scope, should be when parent scope is change the attribute should be updated with the new data. i have only 1 data been changed, the other is not change.

i dont need 2 way binding just 1 way binding is enough that is why i am using @ as an attribute property.

my parent html

<button ng-click="testClick()">Test Click</button>
<my-directive ng-repeat="sensor in sensors track by sensor.sensor_name" 
sensor-name="{{ sensor.sensor_name }}" display-name="{{sensor.display_name}}" 
state-normal="{{ sensor.stateNormal }}" state-alert="{{ sensor.stateAlert }}" 
state-total="{{ sensor.total }}"></my-directive>

my directive template

<div>
  <span>{{ displayName }}</span>
</div>
<div>
  Normal
</div>
<div>
  {{ states["Normal"] }}
</div>
<div>
   Alert
</div>
<div>
   {{ states["Alert"] }}
</div>
<div>
  Total
</div>
<div>
    {{ states["Total"] }}
</div>

inside my parent scope

$scope.sensors = [{
  sensor_name: "stre",
  display_name: "Stre"
}];

var initState = {
  normal: "0",
  alert: "0"
};

var setInitState = function(sensors) {
  for (let i = 0; i < sensors.length; i++) {
    sensors[i]["stateNormal"] = "0";
    sensors[i]["stateAlert"] = "0";
    sensors[i]["total"] = "0";
  }
  return sensors;
}

$scope.sensors = setInitState($scope.sensors);

$scope.testClick = function() {
  $scope.sensors[0].display_name = "testchange";
  $scope.sensors[0].stateNormal = "15";
  $scope.sensors[0].total = "38";
}

my directive scope

app.directive("myDirective", function() {
    return {
        restrict: 'EAC',
        controller: function($scope) {
            $scope.states = {
                "Normal": $scope.stateNormal ? $scope.stateNormal : 'x',
                "Alert": $scope.stateAlert ? $scope.stateAlert : 'x',
                "Total": $scope.stateTotal ? $scope.stateTotal : 'x'
            };
        },
        templateUrl: "my-directive.php",
        scope: {
            sensorName: '@',
            displayName: '@',
            stateNormal: '@',
            stateAlert: '@',
            stateTotal: '@'
        }
    };
 });

the button click is expecting changes towards all the value, but when the button click only the display_name is change but normal and total value is not changing.

you can refer to this plunkr: https://embed.plnkr.co/aXctKP/

Upvotes: 1

Views: 48

Answers (1)

Shaiful Aiman Malik
Shaiful Aiman Malik

Reputation: 71

you can check out this working plunker.

You can check out angularjs docs here to better understand how directive work.

What I do to make it right is I rename the variable inside my-directive.php to follow the attribute you have set in the index.html. You can read the angularjs doc under the Normalization section, it says that it will normalize the element's attribute from state-total to stateTotal.

Upvotes: 0

Related Questions