Question

我正在尝试使用ui.bootstrap创建一个popover for details

我正在尝试使用与this example

完全相同的模板制作popover

但每次我在控制台中收到此错误

Error: [$injector:unpr] http://errors.angularjs.org/1.2.18/$injector/unpr?p0=%24templateRequestProv…er%20%3C-%20%24templateRequest%20%3C-%20tooltipTemplateTranscludeDirective
    at Error (native)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:6:450
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:36:145
    at Object.c [as get] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:34:236)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:36:213
    at c (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:34:236)
    at Object.d [as invoke] (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:34:453)
    at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:44:160
    at Array.forEach (native)
    at q (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js:7:280)

HTML

<nav class="navbar navbar-default">
    <div class="container-fluid">
        <div class="navbar-header" style="margin-left:20px;margin-top:10px;">
            <img src="hello.png" />|Plant Maintenence Notification
        </div>
        <div>
            <button style="float:right"><img src="img/logout.png" />Logout</button>
            <button style="float:right" popover-template="dynamicPopover.templateUrl" popover-placement="bottom" popover-title="{{dynamicPopover.title}}" type="button"><img src="img/user.png" />Username</button>
            <script type="text/ng-template" id="myPopoverTemplate.html">
                <div>{{dynamicPopover.content}}</div>
                <div class="form-group">
                    <label>Popup Title:</label>
                    <input type="text" ng-model="dynamicPopover.title" class="form-control">
                </div>
            </script>
        </div>
    </div>
</nav>
<div class="form-group">
    <label>Popup Template:</label>
    <input type="text" ng-model="dynamicPopover.templateUrl" class="form-control">
</div>

控制器

var app = angular.module('tutorialWebApp', ['ngRoute', 'starter.services', 'ui.bootstrap', 'ngAnimate']);

app.config(function($routeProvider) {
    $routeProvider
    // Home
    .when("/login", {
        templateUrl: "partials/login.html",
        controller: "LoginCtrl",
        cache: false
    })
    // Pages
    .when("/newNotification", {
        templateUrl: "partials/about.html",
        controller: "NewNotificationCtrl",
        cache: false
    })
    .otherwise("/404", {
        templateUrl: "partials/404.html",
        controller: "PageCtrl"
    });
});

app.controller('NewNotificationCtrl', function($scope, $location, $http, $rootScope, EmnServices) {
    alert("hello in beg");
    console.log("NewNotificationCtrl Controller reporting for duty.");
    $scope.dynamicPopover = {
        content: 'Hello, World!',
        templateUrl: 'myPopoverTemplate.html',
        title: 'Rahul Deep'
    };
    alert("end of notification");
});

Answer 1

根据您的错误输出，您使用的是Angular 1.2.18，UI Bootstrap 0.12.0支持：

AngularJS（需要AngularJS 1.3.x，使用1.4.3测试）。 0.12.0是此库的最后一个版本，支持AngularJS 1.2.x。

您使用的是什么版本的UI Bootstrap？

<强> 修改

UI-自举-TPLS-0.13.3

由于您使用的是Angular 1.2.18，因此需要使用UI Bootstrap 0.12.0而不是0.13.3。

<script src="https://code.angularjs.org/1.2.18/angular.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

Plnkr Example

弹出使用ui.bootstrap

1 个答案: