Question

尝试使用Angular＆amp; amp; amp; amp; amp;引导我下载了Angular Angular-UI Bootstrap的最新脚本，并将bootstrap.css链接到我的页面但是它仍然没有加载正确的输出＆gt;我还需要启动Angular ng-controller吗？任何人都可以帮助我的代码。这是源脚本代码

    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-ui/ui-bootstrap.min.js"></script>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />

HTML代码

     <div ng-app ng-controller="TabsDemoCtrl">
      <tabset justified="true">
        <tab heading="Justified">Justified content</tab>
        <tab heading="SJ">Short Labeled Justified content</tab>
        <tab heading="Long Justified">Long Labeled Justified content</tab>
       </tabset>
      </div>

底部脚本执行代码

 <script>
  var TabsDemoCtrl = function ($scope) {
     $scope.tabs = [
       { title: 'Dynamic Title 1', content: 'Dynamic content 1' },
       { title: 'Dynamic Title 2', content: 'Dynamic content 2', disabled: true }
     ];

     $scope.alertMe = function () {
         setTimeout(function () {
             alert('You\'ve selected the alert tab!');
         });
     };
 };
 </script>

让我知道我是否还需要这个来包装执行脚本

        angular.module('detailapp', [])
        .controller('TabsDemoCtrl', function ($scope) {

       });

错误：

GET http://localhost:51491/House/Details/template/tabs/tab.html 404 (Not Found)       angular.js:8980
 (anonymous function) angular.js:8980
  sendReq angular.js:8766
 $http.serverRequest angular.js:8486
  processQueue angular.js:12018
  (anonymous function) angular.js:12034
   Scope.$eval angular.js:13202
    Scope.$digest angular.js:13014
    Scope.$apply angular.js:13306
       bootstrapApply angular.js:1499
         invoke angular.js:4099
           doBootstrap angular.js:1497
        bootstrap angular.js:1517
        angularInit angular.js:1411
        (anonymous function) angular.js:24258
        l jquery?v=EEZBCVzQe1TpkEUeLfjEm53wpuqSSXGjiXFWAVaewp81:1
        s.fireWith jquery?v=EEZBCVzQe1TpkEUeLfjEm53wpuqSSXGjiXFWAVaewp81:1
        i.extend.ready jquery?v=EEZBCVzQe1TpkEUeLfjEm53wpuqSSXGjiXFWAVaewp81:1
        a jquery?v=EEZBCVzQe1TpkEUeLfjEm53wpuqSSXGjiXFWAVaewp81:1
        Error: [$compile:tpload] Failed to load template: template/tabs/tab.html
        http://errors.angularjs.org/1.3.0-rc.0/$compile/tpload?            p0=template%2Ftabs%2Ftab.html
            at http://localhost:51491/Scripts/angular.js:80:12
            at handleError (http://localhost:51491/Scripts/angular.js:14858:17)
            at processQueue (http://localhost:51491/Scripts/angular.js:12018:27)
            at http://localhost:51491/Scripts/angular.js:12034:27
            at Scope.$eval (http://localhost:51491/Scripts/angular.js:13202:28)
            at Scope.$digest (http://localhost:51491/Scripts/angular.js:13014:31)
            at Scope.$apply (http://localhost:51491/Scripts/angular.js:13306:24)
            at done (http://localhost:51491/Scripts/angular.js:8797:47)
            at completeRequest (http://localhost:51491/Scripts/angular.js:9012:7)
            at XMLHttpRequest.xhr.onreadystatechange                         (http://localhost:51491/Scripts/angular.js:8951:11)

Answer 1

所以我首先发现错误，nuget页面中的bootstrap下载不起作用你必须使用另一个

<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.js"></script>

比如这个然后在

中初始化Controller

 angular.module('myapp', ['ui.bootstrap'])
    .controller('TabsDemoCtrl', function ($scope, $http, $window) {
        $scope.tabs = [
         { title: 'tab1', content: 'Justified content' },
         { title: 'tab2', content: 'Dynamic content 2', disabled: true },
         { title: 'tab3', content: 'Dynamic content 3', }
        ];

    });

如何在MVC5中使用Angular Bootstrap？

1 个答案: