Question

我正在使用Angular UI Bootstrap模式来显示自我形式指令，但不会呈现此指令。

在self指令中，我写了一段假的html代码，它只显示一个输入元素。
它可以按预期显示在主页面中，但在模态对话框中消失。

任何人都可以帮忙吗？为什么模态对话框中的指令不显示？

代码在下面是plunker： http://plnkr.co/edit/Qcy7eSf4abJ706VOSN5n?p=preview

代码段如下：

var app = angular.module('modalExample', ['ui.bootstrap']);
    app.directive('formView', [
        "$compile",
        "$timeout",
        function($compile, $timeout){
            return {
                restrict: "E",
                replace: true,
                transclusion: true,
                scope: {
                    config: "="
                },
                compile: function(element, attrs, transclude) {
                    return {
                        pre: function ($scope, iElement, iAttrs, controller) {
                            var fakeHtml = '<input type="text" ng-model="test"/>';
                            angular.element(element).append($compile(fakeHtml)($scope));
                        }
                    };
                }
            };
        }
    ])
    app.controller('modalController', ['$scope', '$uibModal', function($scope, $uibModal) {
        $scope.open = function() {
            var modalinstance = $uibModal.open({
                scope: $scope,
                templateUrl: 'modal.html'
            })
        };
    }]);

<!doctype html>
<html ng-app="modalExample">
<head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.1.js"></script>
    <script src="script.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

<div ng-controller="modalController">
  <script type="text/ng-template" id="modal.html">
    aaa <form-view></form-view>
  </script>
  
    <form-view></form-view>
    <button type="button" ng-click="open()">Open Dialog</button>
</div>

</body>
</html>

Answer 1

请更新您的指令，如下所示 -

app.directive('formView', [
        "$compile",
        "$timeout",
        function($compile, $timeout){
            return {
                restrict: "E",
                replace: true,
                transclusion: true,
                scope: {
                    config: "="
                },
               link: function ($scope, iElement, iAttrs, controller) {
                  var fakeHtml = '<input type="text" ng-model="test"/>';
                         angular.element(iElement).append($compile(fakeHtml)($scope));
                        }


            };
        }
    ]);

我希望这会对你有所帮助。

自我指令不会在角度模态中执行

1 个答案: