如何修复在Plunker中给出空白页面的Angular应用程序?

时间:2018-08-07 17:34:41

标签: javascript angularjs plunker

只需在AngularJS中定义一个应用程序'Demo'

'use strict';

var app = angular.module('demo', []);
app.controller('DemoCtrl', function($scope) {
    $scope.obj={language_selected : {'name':'Choose a language'}};
    $scope.language_list = [{'name': 'english', 'url': 'https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/16/country-4x3/gb.png'},{'name': 'italian', 'url': 'https://raw.githubusercontent.com/stevenrskelton/flag-icon/master/png/16/country-4x3/it.png'}];

});

现在相应地定义了HTML页面

<!DOCTYPE html>
<html lang="en" ng-app="demo">
<head>
  <meta charset="utf-8">
  <title>AngularJS ui-select</title>


  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular-sanitize.js"></script>


  <link rel="stylesheet" href="select.css">

</head>

<body ng-controller="DemoCtrl">

 <div class="select_list" ng-class='{active:active}' ng-click="active=!active">
    <span ng-style="{'background-image':'url('+obj.language_selected.url+')'}">{{obj.language_selected.name}}</span>
    <ul class="options">
        <li class="select_list_option" ng-repeat="language in language_list" ng-click="obj.language_selected=language" ng-style="{'background-image':'url('+language.url+')'}">{{language.name}}</li>
        </ul>
</div>
</body>
</html>

编辑:选中appName->'demo'&ng-app为demo且控制器为DemoCtrl和ng-controller为DemoCtrl。定义适当。

现在,punker会给出一个空白页。

我在这里错过了什么吗?柱塞链接在这里:http://next.plnkr.co/edit/nXsUgM7nEsfg7jXh

3 个答案:

答案 0 :(得分:3)

您忘记加载js代码,请添加

<script src="demo.js"></script>

这是更矮小的http://next.plnkr.co/edit/g4yKhngP1TyJ8jLr

答案 1 :(得分:2)

您缺少在index.html中添加对demo.js的引用。如下添加引用。

<script src="demo.js"></script>

PLUNKER DEMO

答案 2 :(得分:1)

似乎您忘记了加载js代码

<script src="demo.js"></script>

demo