CODEWITHSUNDEEP
angularjs
Andrew Luhring
Andrew Luhring

Reputation: 1914

Angular- Creating a directive from existing html content/

Assume

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.

Upvotes: 0

Views: 270

Answers (2)

Andrew Luhring
Andrew Luhring

Reputation: 1914

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;
}

Upvotes: 0

Kevin
Kevin

Reputation: 150

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.

Upvotes: 1

Related Questions