Изменение элементов в шаблоне директивы на основе данных области

Question

У меня есть директива, вложенная в ng-repeat. Элемент ng-repeat передается в директиву. Я пытаюсь создать шаблон директивы (для тестирования) или templateUrl с переменными элементами на основе ключа/значения в элементе, переданном в директиву. По существу, если item.number> 50 сделать кнопку red else, сделайте ее синей.

Возможно, вы исправите неправильный инструмент. Цель состоит в том, чтобы использовать что-то подобное для изменения тегов 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

Глядя на ваш пример кода, есть несколько моментов, чтобы отметить:

1. Опечатка в свойстве «» munber кнопку 2 в.
2. Функция ссылки не использует инъекцию зависимостей, поэтому порядок аргументов имеет значение. Сначала необходимо перенести область видимости.
3. Ваш комментарий к коду близок к работе, но вам нужно адресовать переменные как свойства области - элемент находится в области видимости, а создаваемый объект кнопки должен быть создан по области, чтобы быть рассмотренным как «кнопка». из вашего шаблона просмотра.

Это работает (это было бы лучше, как уже говорили другие, использовать нг-класс, а не класса плюс синтаксиса усов, но я хотел бы остановиться как можно ближе к примеру кода, как это возможно):

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