什么可能导致这个奇怪的角度ui模式问题？

Question

我是一名新手程序员，试图将角度和节点的Web应用程序组合在一起。我试图结合角度ui模态但有问题。模态窗口在加载时似乎是从主页面渲染html而不是模板中的html。但是，如下所示，模板正在加载到页面中。

我正在寻找的并不一定是这里出现问题的答案（尽管那会很棒），而是建议尝试确定问题的故障排除技术，而不需要在将来使用stackoverflow来解决问题。

问题的屏幕截图：

节点控制台：

以下是我目前的代码：

父控制器和子控制器（分别为addContent和newTerms）：

angular.module('myApp.controllers', []).
controller('addContent', function ($scope, $http, $modal, $log){


$scope.items = ['item1', 'item2', 'item3'];

$scope.addTerm = function () {  
    var newTerm = $modal.open({
        templateUrl: '../../views/partials/newTermModal.jade',
        controller: 'newTerms',
        resolve: {
            items: function () {
                return $scope.items;
            }
        }
    });

    newTerm.result.then(function (selectedItem) {
        $scope.selected = selectedItem;
    }, function () {
        $log.info('Modal dismissed at: ' + new Date());
    });
};

}).

 controller("newTerms",function($scope, $modalInstance, items){

$scope.items = items;
$scope.selected = {
    item: $scope.items[0]
};

$scope.ok = function () {
    $modalInstance.close($scope.selected.item);
};

$scope.cancel = function () {
    $modalInstance.dismiss('cancel');
};

});

我想也许这是模板路径的问题 - 如果路径是相对于控制器文件所在的位置？这就是我现在拥有的方式。非常感谢！

Answer 1

您的控制器代码对我来说没问题，我也怀疑这是模板路径的问题。

我个人没有成功引用templateUrl中的模板文件位置，就像你正在做的那样。我通常做的是在页面底部添加ng-include：

<div ng-include src="'../../views/partials/newTermModal.jade'"></div>  

我不熟悉玉，但假设您的角度模板是这样的结构：

<script type="text/ng-template" id="newTermModal.jade"> 
</script>

然后将templateUrl设置为角度模板的id：

templateUrl: 'newTermModal.jade'

要进行问题排查，我会检查控制台并检查newTermModal.jade的内容，并确保它符合您的预期。

Answer 2

我偶然发现了同样的问题，原因略有不同。 在我的情况下，templateurl未设置为正确的路径。 这意味着无论何时找不到templateurl或者不是有效的HTML（ jade是无效的HTML - 它被预处理器编译成有效的HTML ），那么angular只使用父html页面（即从调用模态的页面）。