Inside showdetailsOfInside() function value of ng-model variable namein and agein that is inside bind-unsafe-html coming undefined however i have filled text contents into it.I can get value through jquery but is there any way to do it through angular js.
<body ng-controller="AppController" class="container">
Name <input type="text" name="name" ng-model="name" /><br>
Age <input type="text" name="age" ng-model="age"/><br>
<button type="button" class="btn btn-primary" ng-click="showdetailsOfInside()">showdetailsOfInside</button><br>
<div bind-unsafe-html="primaryData"></div>
<body>
Content of bind-unsafe-html="primaryData"
<button type="button" class="btn btn-primary" ng-click="shownName()">inside Basic</button><br>
<button type="button" class="btn btn-primary" ng-click="showAge()">inside Primary</button><br>
Name inside <input type="text" name="namein" ng-model="namein" id="nameinside"/><br>
Age indise :: <input type="text" name="agein" ng-model="agein" id="ageinside"/><br>
Code of bind-unsafe-html directive
dynamicContentApp.directive('bindUnsafeHtml', ['$compile', function ($compile) {
return function(scope, element, attrs) {
scope.$watch(
function(scope) {
// watch the 'bindUnsafeHtml' expression for changes
return scope.$eval(attrs.bindUnsafeHtml);
},
function(value) {
// when the 'bindUnsafeHtml' expression changes
// assign it into the current DOM
element.html(value);
// compile the new DOM and link it to the current
// scope.
// NOTE: we only compile .childNodes so that
// we don't get into infinite loop compiling ourselves
$compile(element.contents())(scope);
}
);
};
}]);
If i'm right, that's ng-bind-unsafe-html="primaryData"