在scope angular .js中，innerHTml有什么用？

Question

我在angular.js中創建了一個彈出屏幕..我使用google進行了創建。

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

        }
    }
});

它使用“ innerHtmlBind”是因為它在駝峰情況下將“-”和“：”轉換為..限制：'A'是屬性。我想知道想要的是這個

scope: {
            inner_html: '=innerHtml'
        },

在哪里使用它？我搜索了JS的整個代碼。

整個js代碼是這個

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

JS的scope: { inner_html: '=innerHtml' }位告訴AngularJS為指令創建一個隔離范圍 。

在該隔離范圍內， =表示inner_html屬性與在inner-html屬性中指定的任何scope屬性保持最新。 因此，如果ModalDemoCtrl的作用域具有modal_html_template屬性的初始值，則在指令的鏈接函數中， scope.inner_html將等於相同的值。 同樣，當你更新scope.inner_html指令的鏈接功能中，該值將被復制到$scope.modal_html_template財產ModalDemoCtrl 。

所以，當“innerHtmlBind”指令的元素上運行，鏈接功能獲取的元素inner-html-bind屬性指定的，並設置innerHtml上的分離范圍的該元素的inner_html財產。 然后由AngularJS自動復制到$scope.modal_html_template在ModalDemoCtrl 。 然后可以在open()函數中使用它。

Answer 2

它將inner_html變量綁定為父作用域上的inner-html屬性指向的內容

<div inner-html-bind="" inner-html="modal_html_template" class="hidden">

因此， inner_html綁定到$scope.modal_html_template

指令隔離范圍指南