Reputation: 655
I make a pop up screen In angular.js ..I make this using google .But I have Question in that ..
<div ng-controller="ModalDemoCtrl">
<div inner-html-bind="" inner-html="modal_html_template" class="hidden">
</div>
</div>
app.directive('innerHtmlBind', function() {
alert('inner')
return {
restrict: 'A',
scope: {
inner_html: '=innerHtml'
},
link: function(scope, element, attrs) {
console.log(scope.inner_html);
console.log(element);
console.log(element.html());
scope.inner_html = element.html();
console.log(scope.inner_html);
}
}
});
It used "innerHtmlBind" because it convert "-"and":" in camel case .. restrict: 'A',is attribute.I want to know want is this
scope: {
inner_html: '=innerHtml'
},
and where it is used ?I search whole code of JS ..it never used this ?
whole js code is this
var app = angular.module('plunker', ['ui.bootstrap']);
app.directive('innerHtmlBind', function() {
alert('inner')
return {
restrict: 'A',
scope: {
inner_html: '=innerHtml'
},
link: function(scope, element, attrs) {
console.log(scope.inner_html);
console.log(element);
console.log(element.html());
scope.inner_html = element.html();
console.log(scope.inner_html);
}
}
});
var ModalDemoCtrl = function($scope, $modal, $log) {
alert('model')
$scope.items = [];
$scope.getId = function(item) {
alert('ID: ' + item.id);
};
// This opens a Bootstrap modal
$scope.open = function() {
console.log('---------------------------');
console.log($scope.modal_html_template);
var modalInstance = $modal.open({
template: $scope.modal_html_template,
controller: ModalInstanceCtrl
});
modalInstance.result.then(function(newItem) {
// On modal success
alert('ok Button')
newItem.id = $scope.items.length + 1;
$scope.items.push(newItem);
}, function() {
// On modal cancelation
alert('cancel')
});
}
};
// This is the modal controller
var ModalInstanceCtrl = function($scope, $modalInstance) {
$scope.name = '';
$scope.content = '';
$scope.ok = function() {
var response = {
'name': $scope.name,
'content': $scope.content
};
$modalInstance.close(response);
};
$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};
};
Upvotes: 0
Views: 951
Reputation: 38161
The scope: { inner_html: '=innerHtml' }
bit of the JS tells AngularJS to create an isolate scope for the directive.
On that isolate scope, the =
means that the property inner_html
should be kept up to date with whatever scope property is specified in the inner-html
attribute. So if the scope in ModalDemoCtrl
had an initial value for the modal_html_template
property, then inside the directive's link function, scope.inner_html
would equal the same value. Likewise, whenever you update scope.inner_html
inside the link function of the directive, the value is copied to the $scope.modal_html_template
property in ModalDemoCtrl
.
So when the "innerHtmlBind" directive runs on an element, the link function gets the element that the inner-html-bind
attribute is specified on, and sets the innerHtml
of that element on the isolate scope's inner_html
property. Which is then automatically copied by AngularJS to $scope.modal_html_template
in ModalDemoCtrl
. Which can then be used inside the open()
function.
Upvotes: 1
Reputation: 42746
It binds inner_html
variable to be whatever the inner-html
attribute points to on the parent scope
<div inner-html-bind="" inner-html="modal_html_template" class="hidden">
So inner_html
is bound to $scope.modal_html_template
Upvotes: 0