如何使用 AngularJS 获取元素的属性

Question

我有以下代码：

<div class="col-md-10" data-ng-controller="type-controller">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-success" ng-model="typeId" data-btn-radio="'1'">
            Option 1
        </label>
        <label class="btn btn-success" ng-model="typeId" data-btn-radio="'2'">
            Option 2
        </label>
    </div>
    <input data-ng-model="typeId" name="typeId" type="hidden" data-start="2" />
</div>

我的type-controller 是空的，所以我省略了它 - 但我想从type-controller 中的最后一个输入中获取属性data-start 的值。

我没有使用 jQuery。

Answer 1

如果属性 data-start 很重要，因为它正在被其他一些 3rd 方库使用，那么您可以考虑在服务器上创建它时简单地使用 ng-init：

<input data-ng-model="typeId" name="typeId" type="hidden" data-start="2" 
 ng-init='start = 2' />

这实际上将运行您需要的任何代码，并且不需要您从 DOM 中解析出数据属性。

您可以编写一个非常简单的指令来提取值并使用表达式发布。这基本上会完成同样的事情，但在我看来更难：

angular.module('data-pluck', [])
  .controller('fooController', function() {

    this.name = 'Foo Controller';

  })
  .directive('pluckData', ['$parse',
    function($parse) {

      return {
        restrict: 'A',
        link: function(scope, elem, attrs) {
          var expression = function() {};
          expression.assign = function() {};

          scope.$watch(attrs.placeData, function() {
            expression = $parse(attrs.placeData);
          });

          scope.$watch(attrs.pluckData, function() {
            expression.assign(scope, attrs[attrs.pluckData]);
          });
        }
      };

    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app='data-pluck' ng-controller='fooController as ctrl'>
  <h1>{{ctrl.name}}</h1>
  <div data-my-val="I'm value one" pluck-data='myVal' place-data='ctrl.valueOne'>
    <p>I'm a regular old <code>&lt;p&gt;</code> tag</p>
    <input type='hidden' data-my-val="I'm the second value" pluck-data='myVal' place-data='ctrl.valueTwo' />
  </div>
  <h3>These Values Populated Dynamically</h3>
  <ul>
    <li>ctrl.valueOne = {{ctrl.valueOne}}</li>
    <li>ctrl.valueTwo = {{ctrl.valueTwo}}</li>
  </ul>
</div>

Answer 2

Angular 内置了 jqLit​​e，它仍然具有 attr() 函数。但从控制器手动摆弄 DOM 并不是 Angular 的“方式”。你的作用域应该是它们之间的接口。

我很好奇为什么你的 UI 中的属性值不是在你的模型/范围中首先定义的？这个值是如何改变的？是不是不能在控制器中设置的原因：

$scope.start = 2;

然后：

<input data-ng-model="typeId" name="typeId" type="hidden" data-start="{{start}}" />

您能解释一下 data-start 的含义吗？