如何将HTML元素传递到angularjs代码中？

Question

I want to pass the html element into angularjs code. I have some html elements like data-form-selector='#linechart_general_form' and data-url="{% url 'horizon:admin:metering:samples'%}" I want to access these Html elements in angularjs code.

My html templates, what make to change in the following code so that its elements accessible to angularjs code.

<div class="info row detail">
      <div class="col-sm-9 chart_container">
        <div class="chart"
             data-chart-type="line_chart"
             data-url="{% url 'horizon:admin:metering:samples'%}"
             data-form-selector='#linechart_general_form'
             data-legend-selector="#legend"
             data-smoother-selector="#smoother"
             data-slider-selector="#slider">
        </div>
        <div id="slider"></div>
        <div class="col-sm-3 legend_container">
          <div id="smoother" title="Smoothing"></div>
          <div id="legend"></div>
        </div>
      </div>
    </div>

Answer 1

--Update-- I just reread your question. To access those ATTRIBUTES (not elements, they are values of an element) you can select the object with an identifier, then manipulate it's attributes, like so (jQuery example): $('.chart').attr('data-form-selector', 'myNewValue');

You may need to re-initialize sopmething because of the databinding but that's where I'd start.

==================================

You need to create an angular app and controller first, then use the angularjs and ng-model directive to bind the element to a method in your controller, ie:

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.firstName= "John";
$scope.lastName= "Doe";
});
</script>

<div ng-app="myApp" ng-controller="myCtrl">

First Name: <input type="text" ng-model="firstName"><br>
Last Name: <input type="text" ng-model="lastName"><br>
<br>
Full Name: {{firstName + " " + lastName}}

</div>

In this case, you'd be manipulating the $scope.firstName and $scope.lastName variables in js.

Courtesy W3Schools http://www.w3schools.com/angular/angular_intro.asp

Answer 2

You can do a Directive for doing that.

https://docs.angularjs.org/guide/directive