如何将角度指令中的动作加载为模态

时间:2017-03-09 07:27:53

标签: angularjs directive

如何在指令中加载ActionResult? 我是棱角分明的新人,遇到了这个糟糕的挑战,我不知道我是怎么做到这一点的。 是否有任何简单的方法在角度中使用modal并加载MVC动作?!

<modal title="Modal" visible="showModal">
    <form role="form">
        <div class="form-group">
            <label for="email">email</label>
            <input type="email" class="form-control" id="email" placeholder="Enter email" />
        </div>
        <div class="form-group">
            <label for="password">password</label>
            <input type="password" class="form-control" id="password" placeholder="Password" />
        </div>
        <button type="submit" class="btn btn-default">submit</button>
    </form>
</modal>


ngApp.directive('modal', function () {
debugger;
return {
    template: '<div class="modal fade">' +
       '<div class="modal-dialog">' +
          '<div class="modal-content">' +
          '<div class="modal-header">' +
              '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>' +
            '<h4 class="modal-title">{{ title }}</h4>' +
            '</div>' +
            '<div class="modal-body" ng-transclude></div>' +
         '</div>' +
        '</div>' +
     '</div>',
    restrict: 'E',
    transclude: true,
    replace: true,
    scope: true,
    link: function postLink(scope, element, attrs) {
        scope.title = attrs.title;

        scope.$watch(attrs.visible, function (value) {
            if (value == true)
                $(element).modal('show');
            else
                $(element).modal('hide');
        });

        $(element).on('shown.bs.modal', function () {
            scope.$apply(function () {
                scope.$parent[attrs.visible] = true;
            });
        });
        $(element).on('hidden.bs.modal', function () {
            scope.$apply(function () {
                scope.$parent[attrs.visible] = false;
            });
        });
    }
};

});

1 个答案:

答案 0 :(得分:0)

在指令的link函数中,对获取ActionResult进行HTTP调用。然后使用element.html(HTML content)

将ActionResult中收到的HTML内容放入指令中