如何使用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 value的值。

我没有使用jQuery。

Answer 1

Angular内置了jqLit​​e，它仍然具有attr（）函数。 但这不是从控制器手动在DOM中摆弄角度的“方式”。 您的范围应该是它们之间的接口。

我很好奇为什么您的UI属性中的值没有在模型/范围中首先定义？ 该值如何更改？ 为什么不能在控制器中设置它是有原因的：

$scope.start = 2;

接着：

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

您能解释一下数据启动的含义吗？

Answer 2

如果属性data-start很重要，因为其他一些第三方库正在使用它，那么在服务器上创建它时，您可以考虑简单地使用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>