Question

请帮助我解决下一个问题

我尝试使用ng-class在div块上实现条件类，但遇到了下一个问题 - “它不能正常工作”。示例似乎很简单，我甚至不知道如何描述它。

但还有一个想法 - 控制器不起作用而不是ng-class .....我不知道。

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

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

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>

感谢您的修改。

Answer 1

这里有几个问题。

您只能使用.controller()
在您的模板中，$scope已经是上下文，因此请勿将其包含在HTML
True应为true
您缺少ng-app指令
angular.js未正确包含
您的scripts.js未包含

以下是Plunkr的工作版本，其中包含以上更改：http://plnkr.co/edit/ybDScjDrrIkH8tBNfIg1?p=preview

Answer 2

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

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

工作Plunkr：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>

Answer 3

当您从视图中调用范围中的函数时，只需将其调用：

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

这里是Working Plunkr

Answer 4

您应该创建app.js services.js和controllers.js

您的控制器应该移动到controllers.js并看起来像这样。

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

Answer 5

你的 script.js 文件应为

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

app.controller('testCntr', ['$scope', function($scope) {

  $scope.setClass = function() {
    return true;
  };

}
]);

和 html ：

<!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>

它可以解决您的问题

Plunker链接：http://plnkr.co/edit/Ftx3M0aG9G8cJtyrn5wj?p=preview

angularjs：简单的例子 - ng-class或ng-controller不起作用

5 个答案: