Question

我将angularjs和angularui添加到我的项目中，但它正确显示。它看起来像http://postimg.org/image/vzq0uki3d/。我不明白为什么。我的代码是正确的，我很确定它设置正确的一切。 example.js文件位于带有index.html文件的根目录中。继承我的代码。

的index.html

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="ButtonsCtrl">
    <h4>Single toggle</h4>
    <pre>{{singleModel}}</pre>
    <button type="button" class="btn btn-primary" ng-model="singleModel" btn-checkbox btn-checkbox-true="1" btn-checkbox-false="0">
        Single Toggle
    </button>
    <h4>Checkbox</h4>
    <pre>{{checkModel}}</pre>
    <div class="btn-group">
        <button type="button" class="btn btn-danger" ng-model="checkModel.left" btn-checkbox>Left</button>
        <button type="button" class="btn btn-primary" ng-model="checkModel.middle" btn-checkbox>Middle</button>
        <button type="button" class="btn btn-primary" ng-model="checkModel.right" btn-checkbox>Right</button>
    </div>
    <h4>Radio</h4>
    <pre>{{radioModel}}</pre>
    <div class="btn-group">
        <button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</button>
        <button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</button>
        <button type="button" class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</button>
    </div>
</div>
<script src="angular.min.js"></script>
  </body>
</html>

example.js

angular.module('plunker', ['ui.bootstrap']);
var ButtonsCtrl = function ($scope) {

  $scope.singleModel = 1;

  $scope.radioModel = 'Middle';

  $scope.checkModel = {
    left: false,
    middle: true,
    right: false
  };
};

Answer 1

我对AngularUI不太熟悉。但是，我认为你没有正确定义ButtonsCtrl。你不要把它当作变化。我想你需要这样的东西：

angular.module('plunker', ['ui.bootstrap'])
.controller('ButtonsCtrl', [ '$scope', function($scope) {

  $scope.singleModel = 1;

  $scope.radioModel = 'Middle';

  $scope.checkModel = {
    left: false,
    middle: true,
    right: false
  };
}]);

请参阅有关在全局命名空间中定义ButtonsCtrl的注释。工作示例：http://cdpn.io/HDegL

AngularUI无法正确加载

1 个答案: