如何獲得一個元素與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' /> 

這將從根本上運行任意代碼：