如何访问Angular JS模板指令中设置的值，如“ng class?”

How to access the values set in an Angular JS template directive such as “ng-class?”

本文关键字：设置 class ng 指令 何访问 访问 JS Angular      更新时间：2024-01-13

前言：我正在寻找一个100%干净/原生的Angular JS解决方案来解决这个问题，它使用Angular JS框架本身的功能，而不是一个在DOM中搜索ng-class值的拼凑/破解

所以我有一个模板，设置如下：

<div class="stuff" ng-class="{ 0: 'default', 1: 'thing_1', 2: 'thing_2', 3: 'thing_3', 4: 'thing_4', 5: 'thing_5' }[thingType]">

我知道，在处理DIV的控制器中，我可以分配这样的值；这将导致CCD_ 2被添加到我的DIV类stuff:

$scope.thingType = 2;

这太棒了！但是，在我的控制器中，有没有任何方法可以直接获得ng-class模板中设置的值？我假设JSON被传递到Angular的内部，但如果在控制器中，我可以计算我在模板中设置的值，那就太好了。

我所要做的就是将ng-class JSON blob放入控制器中。目标是，如果我在模板中设置多个类选项，比如那些键编号从0到5的类选项，并且不知何故，我决定在CSS JSON中添加第六个选项，那么如果控制器本身可以自己计算键的数量，而不必调整模板中的一个值和控制器中的其他值，那就太好了。

不管人们怎么看待这种方法，有什么简单/干净的方法可以做到这一点吗？有没有一种方法可以做到这一点，即使用Angular逻辑本身，而不必创建一个用指令等在Angular之外搜索DOM的拼凑？我正在寻找最干净和Angular原生的解决方案，如果存在这样的解决方案的话。

<div ng-class="myJson">
$scope.myJson = { 0: 'default', 1: 'thing_1', 2: 'thing_2', 3: 'thing_3', 4: 'thing_4', 5: 'thing_5' }[thingType];

现在你在你的模板和控制器中都有它，所以你可以用它做任何你想做的事情

另一种解决方案可能是创建一个指令来获取ng-class，将其存储在一个服务中，然后控制器可以获取该服务并将其解析为JSON:

<div id="myDiv1" ng-class="{ 0: 'default', 1: 'thing_1', 2: 'thing_2', 3: 'thing_3', 4: 'thing_4', 5: 'thing_5' }[thingType]"></div>
angular.module('myApp', [])
  .service('myService', [function() {
    var data = {};
    this.set = function(k, v) {
      data[k] = v;
    };
    this.get = function(k) {
      return k ? data[k] : data;
    };
  }])
  .directive('myDirective', ['myService', function(myService) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
        var ngClasses = element.getAttribute('ng-class');
        myService.set(element.getAttribute('id'), ngClasses);
      }
    }
  }])
  .controller('MyCtrl', ['myService', function(myService) {
    var id = 'Use a common id for your DIV which is also available here';
    // Now you will have the ngClasses as JSON as well as keep the template markup
    var ngClasses = JSON.parse(myService.get(id));
  }]);

我不明白这是怎么回事，因为ng class指令不是这样工作的：

<div class="stuff" ng-class="{ 0: 'default', 1: 'thing_1', 2: 'thing_2', 3: 'thing_3', 4: 'thing_4', 5: 'thing_5' }[thingType]">

我的意思是，ng类得到一个对象，您首先声明类名然后添加表达式（这通常是一个条件），如下所示（有两个类）：

//this is going to add 'default' class if isActive is true and 'thing_1' accordingly
<div ng-class="{default: isActive, thing_1: isActiveThing1}"></div>
相关文章：