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

【问题标题】：Change elements in a directive template based on scope data根据范围数据更改指令模板中的元素
【发布时间】：2016-04-20 21:03:56
【问题描述】：

我有一个嵌套在 ng-repeat 中的指令。 ng-repeat 项被传递给指令。我正在尝试根据传递给指令的项目中的键/值生成指令模板（用于测试）或带有可变元素的 templateUrl。本质上，如果 item.number > 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>'
  }
});

【问题讨论】：

标签： javascript angularjs twitter-bootstrap

【解决方案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

【讨论】：

你是对的，ng-class 适用于课堂部分。然后我的后续问题是在使用 Angular UI Boostrap 进度条时，他们将颜色移出类并使其成为自己的 type="" 元素。有没有办法用他们的自定义元素做类似的逻辑？
<uib-progressbar value="55" type="{{item.number > 50 ? 'btn-danger' : 'btn-success'}}"></uib-progressbar>
行了！迷失在文档中，您会错过一些小/简单的事情。谢谢你。

【解决方案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>

【讨论】：

【解决方案3】：

看你的示例代码，有几点需要注意：

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

这行得通（正如其他人所说，使用 ng-class，而不是 class plus mustache 语法会更好，但我想尽可能接近您的代码示例）：

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>

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

【讨论】：