Simple Angular JS Module Not Working, But Master Angular Script Working
Question
I'm learning Angular JS and I wrote a super simple snippet of code but it doesn't seem to be working properly. Here is the Plunker , and the code looks like this. I know Angular is working because the expression in the double curly bracket is evaluated in the HTML ( {{3 * 14}} = 42 ). The problem is that the text in the span is supposed to change based on the value in the input, so if it's divisible by 2 it is Bold and so on. So it seems the problem is that it won't use my custom javascript module. Is there anyway to fix this?
//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>
1 answers
solution1
2 ACCPTED 2017-10-17 21:33:45
Your code seems ok. Just add this styles to your html to get the visual effect:
<style>
.bold {font-weight: bold;}
.underline {text-decoration: underline;}
.italic {font-style: italic;}
</style>
Thanks to @naren-murali for the DEMO .
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.