Question

我在angular.js中制作一个弹出屏幕..我使用谷歌制作这个。但是我有问题...

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

        }
    }
});

它使用＆＃34; innerHtmlBind＆＃34;因为它转换了＆＃34; - ＆＃34;和＆＃34;：＆＃34;在驼峰的情况下..限制：＆＃39; A＆＃39;，属性。我想知道想要的是这个

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为指令创建isolate scope。

在该隔离范围上，=表示属性inner_html应该与inner-html属性中指定的任何范围属性保持同步。因此，如果ModalDemoCtrl中的范围具有modal_html_template属性的初始值，则在指令的链接函数内，scope.inner_html将等于相同的值。同样，每当您在指令的link函数内更新scope.inner_html时，该值都会复制到$scope.modal_html_template中的ModalDemoCtrl属性。

所以当＆＃34; innerHtmlBind＆＃34;指令在元素上运行，链接函数获取指定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

directive isolate scope guide

innerHTml在范围angular .js中有什么用？

2 个答案: