Question

我有一个嵌套在ng-repeat中的指令。 ng-repeat项目将传递给指令。我试图根据传递给指令的项中的键/值生成一个带有可变元素的指令模板（用于测试）或templateUrl。基本上，如果item.number＆gt; 50使按钮变红，否则将其变为蓝色。

我可能正在使用错误的工具来解决问题。目标是使用这样的东西来改变Bootstrap标签。例如逻辑：

if item.number > 50: 
  class="btn btn-danger"
else:
  class="btn btn-success"

如果可能的话，我尝试使用templateUrl来解决这个问题：因为我喜欢按钮来启动引导模式，并且这对于基本模板选项非常适合。传递模板单个范围变量要清晰得多。

这是一个试图描述问题的JSFiddle。

HTML

<div ng-controller="TableCtrl">
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Button</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in buttons">
        <td>{{item.id}}</td>
        <td new-button item='item'></td>
      </tr>
    </tbody>
  </table>
</div>

app.js

var myApp = angular.module('myApp', []);

function TableCtrl($scope) {
  $scope.buttons = {
    button1: {
      id: 1,
      number: '10',
    },
    button2: {
      id: 2,
      munber: '85',
    }
  };
};

myApp.directive('newButton', function() {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      item: '=',
    },
    link: function(elem, attrs, scope) {
        // This is most likely not the right location for this
        /*if (item.number > 50) {
        button.color = red
      }, else {
        button.color = blue
      }; */
    },
    template: '<td><button type="button">{{button.color}}</button></td>'
  }
});

Answer 1

也许您可以使用ng-class：

<button ng-class="{
  'btn-danger': item.number > 50,
  'btn-success': item.number <= 50
}"></button>

请参阅https://docs.angularjs.org/api/ng/directive/ngClass

Answer 2

如果你真的需要一个自定义指令，你可以尝试像这样使用它

link: function(scope,elem,attrs) { var item=scope.item; if (item.number > 50) { elem.addClass("btn-danger"); } else { elem.addClass("btn-success"); } }

但我认为，对于你想要实现的目标，最好使用ngClass指令，如下所示：

<button type="button" item="item" class="btn" ng-class="item.number > 50?'btn-danger':'btn-success'"></button>

Answer 3

查看示例代码，需要注意以下几点：

按钮2''munber'财产中的错字。
链接函数不使用依赖注入，因此参数的顺序很重要。需要先移动范围。
您注释掉的代码已接近工作，但您需要将变量作为范围的属性来处理 - 项目在范围内，并且您要创建的按钮对象需要在范围上创建才能作为“按钮”。来自您的视图模板。

这样可行（正如其他人所说的那样，使用ng-class，而不是类加胡子语法会更好，但我希望尽可能保持与代码示例的接近）：

<强> HTML

<div ng-controller="TableCtrl">
  <table>
    <thead>
      <tr>
        <th>#</th>
        <th>Button</th>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in buttons">
        <td>{{item.id}}</td>
        <td new-button item='item'></td>
      </tr>
    </tbody>
  </table>
</div>

<强> JS

var myApp = angular.module('myApp', []);

function TableCtrl($scope) {
  $scope.buttons = {
    button1: {
      id: 1,
      number: '10',
    },
    button2: {
      id: 2,
      number: '85',
    }
  };
};

myApp.directive('newButton', function() {
  return {
    restrict: 'A',
    replace: true,
    scope: {
      item: '=',
    },
    link: function(scope, elem, attrs) {
        scope.button = {};
        if (scope.item.number > 50) {
        scope.button.class = 'btn btn-danger';
      } else {
        scope.button.class = 'btn btn-success';
      };
    },
    template: '<td><button type="button" class="{{button.class}}">Press Me?</button></td>'
  }
});

<强> CSS

.btn-danger {
  background-color: red;
}
.btn-success {
  background-color: green;
}

Modified JSFiddle

根据范围数据更改指令模板中的元素

3 个答案: