Question

您好，我试图了解这些指示。

基本问题：我在我的范围内有一个名为arrow的属性，它保持图像（箭头）应由css（transform：rotate）转入的角度。我已经建立了一个应该完成这项工作的指令：

HTML：

<div class="weather-div">
  <img ng-src="../img/icons/wetter/wind-arrows/direction.png" 
       arrowdirection="{{ menu.weather.arrow }}">
</div>

指令：

    AppDirectives.directive("arrowdirection", [function(){

      return {
      template: '',
      restrict: 'A',
      scope: {  },
      link: function(scope, element, attrs) {

            // get the angle from the parent scope  
            var angle = scope.arrow;

            // get the image to turn () 
            var element = angular.element(document).find('#theimagetofindfromsameobjectdirectiveisin');

            // turn img
            element.css({
                 '-moz-transform': 'rotate('+angle+'deg)',
                 '-webkit-transform': 'rotate('+angle+'deg)',
                 '-o-transform': 'rotate('+angle+'deg)',
                 '-ms-transform': 'rotate('+angle+'deg)'
            });




      }
    };

}]);

1：如何在指令中访问父范围值menu.weather.arrow或将值传递给指令并在那里访问它？ 2：如何获取图像元素？

Answer 1

我讨厌编写盲目指令（当你无法测试时有太大的错误空间）。如果你制作小提琴/ plnkr，我可以更新。

关键带走：

您不需要使用ng-src，除非您对可能发生变化的内容具有约束力。
scope: {}将您与父控制器隔离开来。您需要使用scope属性将箭头方向链接到范围（arrow='=arrowDirection）上的箭头。这会设置一个双向数据绑定到您在调用指令时设置的值。
如果你想要驼峰的情况下在指令中使用范围，你会在单词之间加上-。
arrow，因此您需要设置监视。
angular允许您访问附加指令的element，因此您无需查询它。
花更多时间询问您的问题，如果您使用A.格式化代码，则更有可能获得回复，B。使用小提琴/ plnkr创建一个简单示例

<div class="weather-div">
    <img src="../img/icons/wetter/wind-arrows/direction.png" 
         arrow-direction=" menu.weather.arrow">
</div>

//Javascript
AppDirectives.directive("arrowdirection", [function(){
  return {
  template: '',
  restrict: 'A',
  scope: {
      arrow :'=arrowDirection'
  },
  link: function(scope, element, attrs) {

        // get the angle from the parent scope  
        var angle = scope.arrow;
        scope.$watch('arrow', function(){
          // get the image to turn () 
          // element is the img 
          element.css({
             '-moz-transform': 'rotate('+angle+'deg)',
             '-webkit-transform': 'rotate('+angle+'deg)',
             '-o-transform': 'rotate('+angle+'deg)',
             '-ms-transform': 'rotate('+angle+'deg)'
          });
        });

    }
  };
}]);

将值传递给指令并更改css属性

1 个答案: