1

我正在使用父范围的插值（{{}}）创建一个具有隔离范围的自定义指令，应该是当父范围更改时，应该使用新数据更新属性。我只更改了 1 个数据，另一个没有更改。

我不需要 2 路绑定，只需 1 路绑定就足够了，这就是我使用 @ 作为属性属性的原因。

我的父母 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>

我的指令模板

<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>

在我的父范围内

$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";
}

我的指令范围

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: '@'
        }
    };
 });

按钮单击期望对所有值进行更改，但是当单击按钮时，仅显示名称发生更改，但正常且总值没有更改。

你可以参考这个plunkr：https ://embed.plnkr.co/aXctKP/

4

1 回答 1

0

你可以看看这个工作的 plunker。

您可以在此处查看angularjs 文档，以更好地了解指令的工作原理。

我要做的就是重命名里面的变量my-directive.php以遵循您在index.html. 您可以阅读 Normalization 部分下的 angularjs 文档，它说它将将元素的属性从state-totalto规范化stateTotal。

于 2019-01-29T07:44:17.030 回答