如何获得一个元素与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是空的，所以我忽略它 - 但我想从最后输入获取属性data-start的价值里面的type-controller。

我没有使用jQuery。

Answer 1

IF，因为它是被一些其他的第三方库的属性data-start是显著，那么你可能会在服务器上创建这个时候考虑简单地使用ng-init你需要，而且不涉及你必须从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的角度并不是“方式”。你的范围应该是它们之间的接口。

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

$scope.start = 2; 

然后：

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

你能解释一下什么数据开始是为了做什么？

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

这将从根本上运行任意代码：