Question

我想制作一个可重复使用的模态窗口指令（我找到了一对模态窗口示例，但这不是我想要的，或者它们无法正常工作）。

看起来应该是这样的：

（1） title-，正文和函数名（对于函数，绑定到模板中的操作按钮）直接在指令

中定义

<my-modal 
    modal-title="Modal Window Title" 
    modal-body="This is my Modal Window Body"  
    click-main-html-action-button="myControllerActionFunction()">
</my-modal>

（2）模态窗口的HTML模板必须选取相应的值

 <div class="panel-default">
    <div class="panel-heading">
         {{title}} 
    </div>
    <div class="panel-body">
        <div class="row">
            <div class="form-group col-sm-12">**{{body}}**</div>
        </div>
        <div class="col-sm-12 text-center">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-ng-click="templatestartaction(); $event.stopPropagation()">Start action</button>
        </div>
    </div>
</div>

（3）必须在控制器中定义模态窗口的按钮功能

app.controller('controller', function($scope) {
    scope.title = "";
    scope.body = "";
    $scope.myControllerActionFunction = function () {
        console.log('myControllerActionFunction', title);
    };
})

问题是：如何从（1）中读取attrs值（modal-title =＆＃34;模态窗口标题＆＃34;等）和功能名称（click-main-html-button action =＆＃34; myControllerActionFunction（）＆＃34;）和将其传递给控制器中的模型和函数定义 （3），以便它显示在html模板中（2）？

我可以从（1）中读取属性，但我不知道如何在控制器中传递它。

（4）

app.directive('myModal', function () {
    return {
        transclude: true,
        restrict: 'E',
        //template: '<div ng-transclude></div>',
    templateUrl: "directives/modal/view/modalWindowTemplate.html"
        scope: {
        templatestartaction: '&clickMainHtmlActionButton'
        },

        link: function (scope, element, attrs) {
            scope.title = attrs.modalTitle;
            scope.body  = attrs.modalBody;                 
        }
    };
});

Answer 1

您需要在控制器中定义标题和正文，如

$scope.modalProps = {
    title: 'My modal title',
    body: 'My modal body'
};

在html中使用它

<my-modal 
   modal-title="modalProps.title" 
   modal-body="modalProps.body"  
   click-main-html-action-button="myControllerActionFunction()">
</my-modal>

为指令

定义它

app.directive('myModal', function () {
return {
    transclude: true,
    restrict: 'E',
    //template: '<div ng-transclude></div>',
    templateUrl: "directives/modal/view/modalWindowTemplate.html"
    scope: {
        templatestartaction: '&clickMainHtmlActionButton'
        title: '=modalTitle',
        body: '=modalBody'
    },
 ...

可重复使用的模态窗口指令。如何将directive-attributes-values传递给controller

1 个答案: