what is the use of innerHTml in scope angular .js?

Question

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');
    };
};

Answer 1

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.

Answer 2

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

directive isolate scope guide