How to pass HTML element into angularjs code?

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>

Use angular directives

GillesC
– GillesC

2015-07-29 17:09:42 +00:00
Commented Jul 29, 2015 at 17:09 — GillesC
– GillesC, Commented Jul 29, 2015 at 17:09

voidzero · Accepted Answer · 2015-07-29 17:16:45Z

--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, i.e.:

<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

Israel Barba · Accepted Answer · 2015-07-29 17:54:46Z

0

You can do a Directive for doing that.

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

answered Jul 29, 2015 at 17:54

Israel Barba

1,50420 silver badges29 bronze badges

Collectives™ on Stack Overflow

How to pass HTML element into angularjs code?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related