Question

我是AngularJS的新手。我想创建一个具有onclick功能的甜甜圈，然后转到下一页。我正在尝试创建一个甜甜圈，但它显示空页。控制台也显示没有错误。 I referred this to create a donut这是我的代码。我试图合并工作代码。

<!doctype html>
<html ng-app="MyApp" >
<head>
<meta charset="utf-8">
<title>AngularJS Plunker</title>
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,500,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
</head>
<body ng-controller="MyCtrl">
<div ng-app="my.app"
donut-chart
donut-data='[
    {label: "Download Sales", value: 12},
    {label: "In-Store Sales",value: 30},
    {label: "Mail-Order Sales", value: 20}
]'
donut-colors='["#31C0BE","#c7254e","#98a0d3"]'
donut-formatter='"currency"'>
</div>
<script>document.write("<base href=\"" + document.location + "\" />");</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-morris-chart/1.2.0/angular-morris-chart.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular-animate.js"></script>
<script src="app.js"></script>
</body>
</html>

和我的js文件

var app = angular.module("MyApp", ["ngAnimate"]);
  app.controller('MyCtrl', function($scope, $timeout) {
             $scope.name = '';    
             $scope.data = {
         singleSelect: null,
             multipleSelect: [],
             option1: 'option-1',
        };
           $scope.forceUnknownOption = function() {
            $scope.data.singleSelect = 'nonsense';
        };

  });

angular.module('my.app', [
    'angular.morris-chart'
])

Answer 1

尝试将 app.js 文件更改为

angular.module('my.app', ['angular.morris-chart'])
       .controller('MyCtrl', function($scope, $timeout) {
             $scope.name = '';    
             $scope.data = {
         singleSelect: null,
             multipleSelect: [],
             option1: 'option-1',
        };
           $scope.forceUnknownOption = function() {
            $scope.data.singleSelect = 'nonsense';
        };
  });

控制器MyCtrl必须是应用my.app的控制器。

请参阅http://plnkr.co/edit/AsxnDG?p=preview

或者，您可以将应用程序定义和控制器定义拆分为两个文件。通常，文件 app.js 用于定义my.app，文件 controllers.js 用于控制器定义。

例如：

app.js

var mod = angular.module('my.app', ['angular.morris-chart']);

controllers.js

var mod = angular.module('my.app.controllers', []);

var MyCtrl = function($scope, $timeout) {

    ...

};

mod.controller('MyCtrl', ['$scope', '$timeout', MyCtrl]);

圆环图在angularjs中不起作用

1 个答案: