javascript - 简单的 Angular JS 模块不工作,但主 Angular 脚本工作

标签 javascript html angularjs

我正在学习 Angular JS,我写了一段 super 简单的代码,但它似乎无法正常工作。 Here is the Plunker ,代码如下所示。我知道 Angular 是有效的,因为双花括号中的表达式是在 HTML 中求值的 ( {{3 * 14}} = 42 )。问题在于 span 中的文本应该根据输入中的值进行更改,因此如果它可以被 2 整除,则它是 Bold 等等。所以看来问题是它不会使用我的自定义 javascript 模块。有办法解决这个问题吗?

//script.js

var root = angular.module('root', []);

root.controller('index', ['$scope', function($scope){
        $scope.value = 1;
        $scope.isBold = function(){
            return $scope.value % 2 === 0;
        };
        $scope.isItalic = function(){
            return $scope.value % 3 === 0;
        };
        $scope.isUnderlined = function(){
            return $scope.value % 5 === 0;
        };
    }]);
<!-- index.html -->

<!DOCTYPE html>
<html ng-app="root">
    <head>
        <link rel="stylesheet" type="text/css" href="style2.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
        <script type="text/javascript" src="script.js"></script>
    </head>
    <body>
        <div ng-controller="index">
            <input type="text" ng-model="value"/>
            <span ng-class="{bold: isBold(), italic: isItalic(), underline: isUnderlined()}">Example Text</span>
            <span>{{3*14}}</span>
        </div>
    </body>
</html>

最佳答案

您的代码似乎没问题。只需将此样式添加到您的 html 中即可获得视觉效果:

<style>
  .bold {font-weight: bold;}
  .underline {text-decoration: underline;}
  .italic {font-style: italic;}
</style>

感谢@naren-murali 提供 DEMO .

关于javascript - 简单的 Angular JS 模块不工作,但主 Angular 脚本工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46799468/

相关文章:

html - 导航栏显示不正确

javascript - DynamoDB 'createSet' 返回 'constructor' 而不是 'Set'

javascript - 为什么 HTML 说我的变量没有定义?

jquery - 验证后删除错误消息

javascript - Img 充当 HTML 表单中不应该提交的按钮

javascript - 使用 AngularJS 动态更改 css 属性

javascript - Angular JS 概念 'Separation Of Concerns' --> CRUD 屏幕

javascript - 在 $routeProvider 解析功能中找不到 AngularJS 声明的服务

javascript - 用于仅获取 javascript 中最后 N 个数字的正则表达式

javascript - setInterval 与 React 中的 setState