Angularjs范围的方法不被NG-类调用 [英] Angularjs Scope method not being called by ng-class

查看:133
本文介绍了Angularjs范围的方法不被NG-类调用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我建立一个应用程序。
我的index.html的样子:

I am building an app. My index.html looks like:

<html ng-app='myApp'>
 <body ng-controller='mainController'>
   <div ng-view>
   </div>
 </body>
</html>

我的主模块JS如下:

var myApp = angular.module('myApp',['ngRoute','mycontrollers']);

myApp.directive('countTable', function(){
  return {
    restrict: 'E',
    scope: {tableType:'=tableType'},
    templateUrl: '../html/table.html'
  };
});

我的控制器JS是这样的:

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

mycontrollers.controller('mainController', function ($scope) {

   $scope.getCellColor = function (value) {
        if(value===20){
            return 'sucess';
         }           
         else {
            return 'error';
         }
   };
});

mycontroller.controller('unitTableController', function($scope,unitdata) {
  $scope.something = {data: unitdata.getData()};
});

注意 mainController 是一个父控制器。 unitTableController 从mainController继承。

Note that the mainController is a parent controller. unitTableController inherits from the mainController.

该指令的 countTable 模板由unitTableController加载。

The directive countTable template is loaded by the unitTableController.

table.html 如下:

 <table>
   <tr ng-repeat="row in tableType.data.rows">
      <td ng-repeat="col in row track by $index" ng-class="getCellColor(col)">{{col}}</td>
   </tr>
 </table>

的html格式的持有指令如下:

The html holding the directive looks like:

<div>
  <count-table table-type='something'></count-table>
</div>

现在该指令是印刷的形式正确的数据是应该的,但在 getCellColor()在父方法的 mainController 不会被调用。

Now the directive is printing the correct data in the form it is supposed to, but the getCellColor() method in the parent mainController is not being called.

UNITDATA 是一个服务数据获取数据了休息,但在这里它是一个令人关注的不是。

unitData is a service data gets data over rest, but here it is not of concern.

我需要该组的基础上的值在单元中的条件的类的表格单元。
我不希望使用现有的表/格工具,它是使用一个工具一个非常简单的表格。
是不是我做错了,或是否有更好的方法基于其价值来获取类小区的?

I need to the set the class of the the table cell based on the condition of value in the cell. I do not want to use the existing table/grid tools, it is a very simple table for using a tool. Is there something I am doing wrong or is there a better way to get the class of a cell based on its values?

也许是有什么错法的范围被调用。

Maybe is there something wrong with the scope of method being called.

请建议。

推荐答案

通过 getCellColor 方法来这样的指令:

Pass the getCellColor method to the directive like this:

<count-table table-type='tableType' 
get-cell-color='getCellColor(col)'>
</count-table>

该指令是这样的:

The directive looks like this:

app.directive('countTable', function(){
  return {
    restrict: 'E',
    scope: {
      tableType:'=tableType',
      getCellColor: '&'
    },
    templateUrl: 'table.html'
  };
});

该指令模板看起来是这样的:

The directive template looks like this:

 <table>
   <tr ng-repeat="row in tableType.data.rows">
      <td ng-repeat="col in row track by $index" ng-class="getCellColor({col: col})">{{col}}</td>
   </tr>
 </table>

Plunker

这篇关于Angularjs范围的方法不被NG-类调用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆