Работает для меня:
.boldoption {
font-weight: bold;
}
<select>
<option>Some normal-font option</option>
<option>Another normal-font option</option>
<option class="boldoption">Some bold option</option>
</select>
В этом случае вам не нужно просто «вставлять HTML», а скомпилировать его. Вы можете создавать DOM-узлы, используя сервис $compile
.
var tpl = $compile( '<div><p ng-repeat="each in arr">{{each}}</p></div>' )( scope );
Как видите, $compile
возвращает функцию, которая принимает объект области видимости в качестве параметра, по отношению к которому оценивается код. Результирующий контент может быть вставлен в DOM, например, с помощью element.append()
.
Важное примечание : Но при ни при каких обстоятельствах никакой код, связанный с DOM, не принадлежит вашему контроллеру. Надлежащее место - это , всегда директива. Этот код можно легко добавить в директиву, но мне интересно, почему вы вообще программно вставляете HTML.
Не могли бы вы пролить свет на то, чтобы я мог дать более конкретный ответ?
Обновление
Предполагая, что ваши данные поступают из службы:
.factory( 'myDataService', function () {
return function () {
// obviously would be $http
return [ "Apple", "Banana", "Orange" ];
};
});
И ваш шаблон поступает из службы
.factory( 'myTplService', function () {
return function () {
// obviously would be $http
return '<div><p ng-repeat="item in items">{{item}}</p></div>';
};
});
Затем вы создаете простую директиву, которая читает в предоставленном шаблоне, компилирует его и добавляет его на экран:
.directive( 'showData', function ( $compile ) {
return {
scope: true,
link: function ( scope, element, attrs ) {
var el;
attrs.$observe( 'template', function ( tpl ) {
if ( angular.isDefined( tpl ) ) {
// compile the provided template against the current scope
el = $compile( tpl )( scope );
// stupid way of emptying the element
element.html("");
// add the template content
element.append( el );
}
});
}
};
});
Тогда, с вашей точки зрения:
<div ng-controller="MyCtrl">
<button ng-click="showContent()">Show the Content</button>
<div show-data template="{{template}}"></div>
</div>
А в контроллере вы просто связываете это вместе:
.controller( 'MyCtrl', function ( $scope, myDataService, myTplService ) {
$scope.showContent = function () {
$scope.items = myDataService(); // <- should be communicated to directive better
$scope.template = myTplService();
};
});
И все это должно работать вместе!
PS: все это при условии, что ваш шаблон приходит с сервера. Если это не так, то ваш шаблон должен быть в директиве, что упрощает вещи.