Angular- Creating a directive from existing html content/

Question

Assume

You have html that you can not modify the inner contents of- but you CAN modify the element attributes.
Your goal is to perform 3d transformations on the element that are bidirectionally linked to the value of 3 range inputs.
- One input for X rotation, Y Rotation and Z Rotation.

In order to do that, I think I need to use a directive-- but if I use a directive it will erase the existing html...

see this codepen for the current version.

HTML

<html ng-app="truck">
<head></head>
<body>
 <section ng-controller="TruckCtl">
      <section class="controls">
        <fieldset>
          <legend>Rotation</legend>
          <div>
            <label for="xRotation">X:</label>
            <input id="xRotation" ng-model="Rotation.x" type="range" min="0" max="360">
            <span ng-bind="Rotation.x"></span>  
          </div>

          <div>
            <label for="yRotation">Y:</label>
            <input name="yRotation" ng-model="Rotation.y" type="range" min="0" max="360">
            <span ng-bind="Rotation.y"></span>
          </div>
          <div>
            <label for="zRotation">Z:</label>
            <input name="zRotation" ng-model="Rotation.z" type="range" min="0" max="360">
            <span ng-bind="Rotation.z"></span>
          </div>  
        </fieldset>
      </section>

      <section class="wrapper">
        <div id="truck" ng-model="Rotation">
        </div>
      </section>
    </section>
</body>
</html>

JS

(function(){
    "use strict";
    var app = angular.module('truck', []);

    app.controller("TruckCtl", function($scope){
      $scope.Rotation = {
        x: 0,
        y: 0,
        z: 0
      };
    });

    //no dice v
    app.filter("rotate", function() {
        return function(input) {
          return model.style({
            "-webkit-transform" : "rotateX(" + Rotation.x + "deg)"
          });
          console.log(model);
        }
    });

    //Directives are where I ge lost.
    app.directive("Rotation", function(){
      return function(scope, element, attrs){
        //what do?

      }
    });
})();

also: I have no idea why this fiddle doesn't work.

Just a couple things wrong with your fiddle. Body tags are done slightly differently jsfiddle.net/Lhuyp/3 — hassassin
– hassassin, Commented Jan 28, 2014 at 7:19

Kevin · Accepted Answer · 2014-01-29 04:56:10Z

1

I would recommend to get it working by keeping things simple first. Once you have code that works, you can refactor it out into a filter and directive. The angular docs cover how to implement a directive pretty well, you can basically just copy, paste, and modify. If you have specific questions I'm sure you'll find answers here or elsewhere. As far as simple code to achieve your goal; your controller along with this HTML will rotate as specified:

<div id="truck" style="-webkit-transform: rotateX({{Rotation.x}}deg) rotateY({{Rotation.y}}deg) rotateZ({{Rotation.z}}deg);"></div>

Also, BTW - js convention is to use camelCasing. $scope.Rotation should be $scope.rotation (lowercase r). Use PascalCase for constructors. Although it is purely a preference, you'll find most libraries adhere to this convention.

answered Jan 29, 2014 at 4:56

Kevin

1503 silver badges7 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Andrew Luhring · Accepted Answer · 2014-01-30 19:49:25Z

So the TLDR version is that my nesting was off so my scopes were wrong. Also I should've been using a factory rather than a filter or a directive. Working example can be found: here

--one caveat is that it doesn't work until you adjust all the values first. so just move all of the range sliders to 0 and then change them as you please

html

<section ng-app="truck">
  <section id="wrapper" ng-controller="Truck">
    <section class="controls"> 
      <fieldset>
        <legend>Rotation</legend>
        <div>
          <label for="xRotation">X:</label>
          <input id="xRotation" ng-model="Rotation.x" type="range" min="-100" max="100">
          [[Rotation.x]]            
        </div>
        <div>
          <label for="yRotation">Y:</label>
          <input id="yRotation" ng-model="Rotation.y" type="range" min="-100" max="100">
          [[Rotation.y]]
        </div>
        <div>       
          <label for="zRotation">Z:</label>
          <input id="zRotation" ng-model="Rotation.z" type="range" min="-100" max="100">
          [[Rotation.z]]
        </div>
      </fieldset>
      <fieldset>
        <legend>Translation</legend>
        <div>
          <label for="xTranslation">X:</label>
          <input id="xTranslation" ng-model="Translation.x" type="range" min="-100" max="100">
          [[Translation.x]]         
        </div>
        <div>
          <label for="yTranslation">Y:</label>
          <input id="yTranslation" ng-model="Translation.y" type="range" min="-100" max="100">
          [[Translation.y]]
        </div>
        <div>       
          <label for="zTranslation">Z:</label>
          <input id="zTranslation" ng-model="Translation.z" type="range" min="-100" max="100">
          [[Translation.z]]
        </div>
      </fieldset>
    </section>
    <div id="zderp">
      <div id="truck" style="-webkit-transform: rotateX([[Rotation.x]]deg) rotateY([[Rotation.y]]deg) rotateZ([[Rotation.z]]deg) translateX([[Translation.x]]px) translateY([[Translation.y]]px) translateZ([[Translation.z]]px)">
      </div>
    </div>
  </section>
</section>

js

var app = angular.module('truck', []).config(function($interpolateProvider){
    "use strict";
    $interpolateProvider.startSymbol('[[').endSymbol(']]');
});
app.factory('Rotation', function(){
    return {
        x : '1',
        y : '1',
        z : '1'
    }
});

function TruckCtl($scope, Rotation){
    $scope.x = Rotation.x;
    $scope.x = Rotation.y;
    $scope.x = Rotation.z;
}
function Truck($scope, Rotation){
    $scope.x = Rotation.x;
    $scope.x = Rotation.y;
    $scope.x = Rotation.z;
}

Collectives™ on Stack Overflow

Angular- Creating a directive from existing html content/

Assume

HTML

JS

2 Answers 2

Comments

html

js

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Assume

HTML

JS

2 Answers 2

Comments

html

js

Comments

Your Answer

Sign up or log in

Post as a guest

Related