[英]How to get an element's attribute with AngularJS
I have the following code: 我有以下代码:
<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>
My type-controller
is empty so I'm omitting it - but I want to get the value of the attribute data-start
from the last input inside the type-controller
. 我的
type-controller
为空,因此我省略了它-但我想从type-controller
内部的最后一个输入中获取属性data-start
value的值。
I'm not using jQuery. 我没有使用jQuery。
Angular comes with jqLite built in, which still has the attr() function. Angular内置了jqLite,它仍然具有attr()函数。 But it's not the Angular "way" to be manually fiddling around in the DOM from a controller.
但这不是从控制器手动在DOM中摆弄角度的“方式”。 Your scope should be the interface between them.
您的范围应该是它们之间的接口。
I'm curious as to why you have a value in an attribute in your UI that isn't defined first in your model / scope? 我很好奇为什么您的UI属性中的值没有在模型/范围中首先定义? How does this value get changed?
该值如何更改? Is there a reason why you can't set it in the controller:
为什么不能在控制器中设置它是有原因的:
$scope.start = 2;
and then: 接着:
<input data-ng-model="typeId" name="typeId" type="hidden" data-start="{{start}}" />
Can you explain a little about what data-start is meant to do? 您能解释一下数据启动的含义吗?
IF the attribute data-start
is significant because it is being used by some other 3rd party library, then you might consider simply using ng-init
when you create this on the server: 如果属性
data-start
很重要,因为其他一些第三方库正在使用它,那么在服务器上创建它时,您可以考虑简单地使用ng-init
:
<input data-ng-model="typeId" name="typeId" type="hidden" data-start="2"
ng-init='start = 2' />
This will essentially run any code you need, and doesn't involve you having to parse out data attributes from the DOM. 这实际上将运行您需要的任何代码,而无需您从DOM中解析出数据属性。
You could write a pretty trivial directive to pull in the value and publish using an expression. 您可以编写一个简单的指令来提取值并使用表达式进行发布。 This will essentially accomplish the same thing, but is more difficult in my opinion:
从本质上讲,这将完成同一件事,但在我看来更加困难:
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><p></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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.