http://jsfiddle.net/xKU5R/
In the above case, I'm expecting elements with cls
class to be picked up with the same behavior from within ng-repeat
(ng-bind-html-unsafe
), and explicitly set one.
<div ng-app="appp">
<div ng-controller="Ctrl">
<ul>
<li ng-repeat="r in data" ng-bind-html-unsafe="r.alink"></li>
</ul>
<div class="cls">External</div>
</div>
</div>
function Ctrl($scope) {
$scope.data = [
{alink: '<span><a class="cls">One</a></span>'},
{alink: '<span><a class="cls">Two</a></span>'}
];
}
angular.module('appp', [])
.directive('cls', function() {
return {
restrict: 'C',
replace: true,
scope: true,
link: function(scope, element, attrs) {
element.bind('click', function() {
alert('Aha!');
});
}
}
});
I'm wondering what I'm doing wrong here?
Explaination. ng-state is not an AngularJS directive. Q 15 - Which of the following is true about ng-app directive? A - ng-app directive defines and links an AngularJS application to HTML.
AngularJS directives are extended HTML attributes with the prefix ng- . The ng-app directive initializes an AngularJS application. The ng-init directive initializes application data. The ng-model directive binds the value of HTML controls (input, select, textarea) to application data.
A controller is usually used to contain and maintain the logic for your view, which gets bound to your view via $scope. A directive is something that you might use repeatedly and is called in your view directly through the directive name which you can pass in as an attribute.
ng-app: The ng-app Directive in AngularJS is used to define the root element of an AngularJS application. This directive automatically initializes the AngularJS application on page load. It can be used to load various modules in AngularJS Application.
The problem is that the new HTML is not being compiled by Angular. The simplest solution may be to manually compile the dynamic content using the $compile
service. Do this in a custom directive and replace ng-bind-html-unsafe="r.alink"
with something like htmlinsert="r.alink"
. Here is how that directive could be coded:
angular.module('appp', [])
.directive('htmlinsert',function($compile){
return {
scope: {
htmlinsert: '='
},
link: function(scope,element,attrs){
var compiledElement = $compile(scope.htmlinsert)(scope);
element.append(compiledElement);
}
}
});
The reference to the html string is passed using isolate scope binding, and is then compiled before being appended to the current iteration of the repeated DOM element.
Demo: http://jsfiddle.net/sh0ber/CLEqc/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With