Angularjs:简单的例子——ng-class或ng-controller不起作用

angularjs: simple example - ng-class or ng-controller does not work

本文关键字：ng-class ng-controller 不起作用 简单 Angularjs      更新时间：2023-09-26

请帮我解答下一个问题

我尝试使用ng-class在div块上实现条件类，但遇到了下一个问题-"它不工作"。这个例子似乎很简单，我甚至不知道还能怎么描述。

但还有一个想法-控制器不工作，而不是ng类.....我不知道。

在这里你可以看到我的代码，请，也许你会发现错误或给我一个建议。

http://plnkr.co/edit/Zm0g4QfkqzTD3h4FWfcp?p =

预览
demoApp = angular.module('demoApp',[]);
var controllers = {};

controllers.testCntr = function ($scope)
  {
  $scope.setClass = function()
    {
      alert('works');
      return True;
    }
  };
HTML

<!doctype html>
<html ng-app="demoApp">
<head>
    <title></title>
<style>
.red
  {
    color:red;
  }
</style>

    <script src="angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular-route.js"></script>
</head>
<body>
    <div ng-controller="testCntr">
      <span ng-class="{red: $scope.setClass()}">Test color</span>
      <div>{{$scope.setClass()}}</div>
    </div>

</body>

</html>

谢谢你的修改

这里有几个问题。

  1. .controller()
    2. 一次只能添加一个控制器
  2. 在你的模板中，$scope已经是上下文了，所以不要在HTML
    3. 中包含它
  3. True应为true
  4. 您缺少ng-app指令
  5. angular.js未正确包含
  6. 您的scripts.js未包含

这是你的Plunkr与上述变化的工作版本:http://plnkr.co/edit/ybDScjDrrIkH8tBNfIg1?p=preview

当您从视图中调用作用域中的函数时，只需像这样调用它:

  <body ng-app="app">
    <div ng-controller="Ctrl">
      <span ng-class="{'red': setClass()}">Test color</span>
      <div>{{setClass()}}</div>
    </div>
  </body>

这里工作活塞

你应该创建一个app.js . services.js和controllers.js

你的控制器应该移动到controllers.js中，看起来像这样。

demoApp.controller('testCntr',function ($scope){
  $scope.setClass = (function(){
    alert('works');
    return True;
  })
});

要将控制器添加到你的应用程序中，你应该这样做

  demoApp.controller('testCntr', function ($scope) {
    $scope.setClass = function() {
      alert('works');
      return True;
    }
  })

工作活塞:http://plnkr.co/edit/LPY94jPJdIJX4pr9K5FY?p=preview

工作演示:

demoApp = angular.module('demoApp',[]);
demoApp.controller('testCntr', function ($scope) {
    $scope.setClass = function() {
      alert('works');
      return 33;
      return True;
    }
  })
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="demoApp" <div="" ng-controller="testCntr">
      <span ng-class="{red: $scope.setClass()}">Test color</span>
      <div>{{setClass()}}</div>
</div>

你的script.js文件应该是

var app = angular.module('demoApp',[]);
app.controller('testCntr', ['$scope', function($scope) {
  $scope.setClass = function() {
    return true;
  };
}
]);

和 : 

<!DOCTYPE html>
<html ng-app="demoApp">
  <head>
    <script src="angular.min.js"></script>
    <script src="script.js"></script>
    <style>
          .red {
             color:red;
          }
   </style>
  </head>
  <body ng-controller="testCntr">
    <span ng-class="{red: setClass()}">Test color</span>
  </body>
</html>

它可能解决你的问题

活塞链接:http://plnkr.co/edit/Ftx3M0aG9G8cJtyrn5wj?p=preview

相关文章：