Question

嗨，我只是想让它发挥作用但不断出错。单击按钮时，它应该向屏幕添加警报。

   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>

Answer 1

请尝试此代码..它适合我。

<!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',[])

angular js add alert ctrl无效

1 个答案: