Как использовать ng-bind в значениях HTML-кода

Я хочу использовать директиву ng-bind вместо скобок {{}} в AngularJS. У нас есть пример:Как использовать ng-bind в значениях HTML-кода

<tag type="{{value1}}">{{value2}}</tag>

Изменить значение2 легко. Мы имеем:

<tag type="{{value1}}" ng-bind="value2"></tag>

Как мы можем изменить {{value1}} удалить скобки обозначения?

Первое решение от DonJuwe не подходит для меня. Может быть, я делаю что-то неправильно. Например, в HTML:

<div ng-controller="TestController"> 
    1. <p style="{{style}}">{{style}}</p> 
    2. <p style="getStyle()" ng-bind="style"></p> 
    3. <p style="getStyle()" ng-bind="getStyle()"></p> 
    <input type="button" ng-click="setStyle()" value="Change Style" /> 
</div>

в контроллере:

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

module.controller('TestController', function ($scope) { 
    $scope.style = 'color: rgb(0, 0, 0)'; 

    $scope.getStyle = function() { 
     return $scope.style; 
    }; 

    $scope.setStyle = function() { 
     $scope.style = 'color: rgb('+Math.floor(Math.random() * 255)+', 0, 0)'; 
    } 
});

После нажатия на кнопку, все тексты (1., 2., 3.) являются правильными, но только линия 1 меняющегося цвета, чтобы случайный красный ,

источник

2015-03-10 Andrzej Precz

Возможный дубликат http://stackoverflow.com/questions/14952562/angular-js-dynamic-form-input-types – Dayan

, пожалуйста, сообщите нам, почему вы не хотите использовать фигурные скобки. возможно, есть другое решение для вашей проблемы. – DonJuwe

Очевидно, что ng-bind лучше и быстрее, чем использование фигурных скобок, что в конфликте с обозначением Twig в моем случае побуждает меня находить другой/лучший способ, чем изменение интерполяционных знаков AngularJS или Twig, например. '{[{' and '}]}' :) –

Вы можете вызвать функцию в вашем контроллер который возвращает значение:

<tag type="getValue()" ng-bind="value2"></tag>

И в вашем контроллер:

$scope.getValue = function() { 
    return type; 
}

источник

2015-03-10 11:50:34 DonJuwe

Это не работает для меня. Я добавил пример в вопрос –

Ну, это работает для меня: http://jsfiddle.net/7uk60c9o/ – DonJuwe

Я думал, что, может быть, мой браузер - это причина, но ваш сайт на Firefox 36, Chromium 41 и Chrome 40 на моем телефоне, дает тот же результат: тексты в порядке, но только первый текст меняет цвет после клика. Не могли бы вы подтвердить, что в вашем браузере цвет меняется для всех текстов каждый раз? –

решительность DonJuwe в:

HTML :

<div ng-controller="TestController"> 
    1. <p style="{{style}}">{{style}}</p> 
    2. <p style="{{style}}" ng-bind="style"></p> 
    3. <p my-style ng-bind="style"></p> 
    <input type="button" ng-click="setStyle()" value="Change Style" /> 
</div>

Контроллер:

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

myApp.directive('myStyle', function() { 
    return { 
     scope: { 
      color: '=ngBind' 
     }, 
     link: function(scope, elem) { 
      elem.attr('style', scope.color); 
      scope.$watch('color', function() { 
       elem.attr('style', scope.color); 
      }); 
     } 
    } 
}); 

function TestController($scope) {  
    $scope.style = 'color: rgb(0, 0, 0)'; 

    $scope.setStyle = function() { 
     $scope.style = 'color: rgb(' + 
      Math.floor(Math.random() * 255) + 
      ', ' + 
      Math.floor(Math.random() * 255) + 
      ', ' + 
      Math.floor(Math.random() * 255) + 
      ')'; 
    } 
}

Спасибо большое!

источник

2015-03-11 13:47:06

Как использовать ng-bind в значениях HTML-кода

ответ

Смежные вопросы