假设

Question

假设

你有html，你无法修改内容 - 但你可以修改元素属性。
您的目标是对双向链接到3范围输入值的元素执行3d转换。
- X旋转，Y旋转和Z旋转的一个输入。

为了做到这一点，我想我需要使用一个指令 - 但是如果我使用一个指令它会删除现有的html ......

请参阅此codepen了解当前版本。

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?

      }
    });
})();

也：我不知道为什么this fiddle不起作用。

Answer 1

我建议首先让事情变得简单。一旦有了可行的代码，就可以将其重构为过滤器和指令。角度文档涵盖了如何很好地实现指令，基本上只需复制，粘贴和修改即可。如果您有具体问题，我相信您会在这里或其他地方找到答案。至于简单的代码来实现你的目标;您的控制器以及此HTML将按指定的方式旋转：

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

另外，BTW-js惯例是使用camelCasing。 $ scope.Rotation应该是$ scope.rotation（小写r）。使用PascalCase作为构造函数。虽然它纯粹是一种偏好，但你会发现大多数图书馆都遵循这一惯例。

Answer 2

所以TLDR版本是我的嵌套关闭所以我的范围是错误的。我也应该使用工厂而不是过滤器或指令。可以找到工作示例：here

- 需要注意的是，在您首先调整所有值之前，它不起作用。所以只需将所有范围滑块移动到0，然后根据需要更改它们

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

Angular-从现有的html内容创建指令/

假设

HTML

JS

2 个答案:

的HTML

JS