角js添加警報ctrl不工作

嗨我只是試圖讓這個工作，但不斷收到錯誤。當按鈕被點擊時，它應該向屏幕添加警報。角js添加警報ctrl不工作

var app = angular.module('ui.bootstrap') 
 
    
 
    angular.module('app').controller('messageCtrl', function ($scope) { 
 
    $scope.alerts = [ 
 
    { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' }, 
 
    { type: 'success', msg: 'Well done! You successfully read this important alert message.' } 
 
    ]; 
 

 
    $scope.addAlert = function() { 
 
    $scope.alerts.push({msg: 'Another alert!'}); 
 
    }; 
 

 
    $scope.closeAlert = function(index) { 
 
    $scope.alerts.splice(index, 1); 
 
    }; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<body ng-app="app" ng-controller="messageCtrl"> 
 
<div class="container"> 
 

 
    
 
    
 
<script type="text/ng-template" id="alert.html"> 
 
    <div ng-transclude></div> 
 
    </script> 
 

 
    <div uib-alert ng-repeat="alert in alerts" ng-class="'alert-' + (alert.type || 'warning')" close="closeAlert($index)">{{alert.msg}}</div> 
 
    <div uib-alert template-url="alert.html" style="background-color:#fa39c3;color:white">A happy alert!</div> 
 
    <button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button> 
 
</div>

來源

2017-10-28 Vzupo

請試試這個代碼。它的工作對我來說。

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <meta charset="utf-8" /> 
</head> 

    <body ng-app="app" ng-controller="messageCtrl"> 
     <div class="container"> 

      <script type="text/ng-template" id="alert.html"> 
       <div ng-transclude></div> 
      </script> 

      <div uib-alert ng-repeat="alert in alerts" ng-class="'alert-' + (alert.type || 'warning')" close="closeAlert($index)">{{alert.msg}}</div> 
      <div uib-alert template-url="alert.html" style="background-color:#fa39c3;color:white">A happy alert!</div> 
      <button type="button" class='btn btn-default' ng-click="addAlert()">Add Alert</button> 
     </div> 


     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
     <script> 
      // var app = angular.module('ui.bootstrap') 

      angular.module('app',[]).controller('messageCtrl', function ($scope) { 
       $scope.alerts = [ 
        { type: 'danger', msg: 'Oh snap! Change a few things up and try submitting again.' }, 
        { type: 'success', msg: 'Well done! You successfully read this important alert message.' } 
       ]; 

       $scope.addAlert = function() { 
        $scope.alerts.push({ msg: 'Another alert!' }); 
       }; 

       $scope.closeAlert = function (index) { 
        $scope.alerts.splice(index, 1); 
       }; 
      }); 
     </script> 
    </body> 
</html>

所做的修改如下。

評論此行，因爲它沒有任何意義。

var app = angular.module('ui.bootstrap')

更正了模塊的語法。

angular.module('app',[])

來源

2017-10-28 18:53:00

爲什麼ui bootstrap不需要？ – Vzupo

所有警報都是引導程序 – Vzupo

在目前的情況下，它沒有任何意義。語法缺少第二個參數，它是依賴關係列表。你從哪裏得到這條線？ –

角js添加警報ctrl不工作

回答

相關問題