同じ指示文で要素を変更する

Question

コンテナにはいくつかの要素があります。行の1つに2つのアイコンがあります。ズームインしたりズームアウトしたりします。拡大をクリックすると、すべての行の幅が拡大されます。

<div id="events"> 
    <year>year 1</year> 
    <year>year 2</year> 
    <year>year 3</year> 
    <year>year 4</year> 

    <div id="scaling"> 
     <md-icon aria-label="Zoom In" class="material-icons" ng-click="zoomIn()">zoom_in</md-icon> 
     <md-icon aria-label="Zoom Out" class="material-icons" ng-click="zoomOut()">zoom_out</md-icon> 
    </div> 
</div> 

私は年ディレクティブを持っている：

angular.module("app").directive("year", ['$rootScope', function ($rootScope) { 
    return { 
     link: function($scope, element, attr) { 

      var events = element; 

      $scope.zoomIn = function(ev) { 

       console.log('zoomin'); 
       $scope.zoom = $scope.zoom + $scope.scale; 

       if($scope.zoom < 100) { $scope.zoom = 100; } 

       events.html($scope.zoom); 

       events.css({ 
        'width': $scope.zoom + '%' 
       }); 
      } 

      $scope.zoomOut = function(ev) { 
       $scope.zoom = $scope.zoom - $scope.scale; 

       if($scope.zoom < 100) { $scope.zoom = 100; } 

       events.css({ 
        'width': $scope.zoom + '%' 
       }); 
      } 
     } 
    } 
}]); 

幅はごく昨年の要素に適用されるが。何故ですか？

Answer 1

毎回スコープを上書きしています。したがって、yearディレクティブの各インスタンスは、インスタンス化されるたびにzoomInおよびzoomOutメソッドを破棄します。

通常は、新しいを使用してこの問題を解決したり、ディレクティブ定義オブジェクトに適用範囲を特定できます。しかし

//new scope 
{ 
    scope: true 
} 

//isolate scope 
{ 
    scope: {} 
} 

、あなたはクリックハンドラに外の個人のyearディレクティブをバインドしたいので、あなたがしなければならないだろう他の何か。

より良い解決策は、属性を渡すと、単純にその変化に対応するために、次のようになります。

return { 
    scope: { 
     zoom: '=' 
    }, 
    link: function(scope, elem, attrs){ 

     scope.$watch('zoom', function(){ 
     //Do something with 'scope.zoom' 
     }); 

    } 
}; 

今、あなたの外部zoomInとzoomOut機能は、単に親スコープ上でいくつかのzoomプロパティを変更することができ、あなたがバインドすることができますそれにあなたのyearコンポーネントがあります。

<year zoom="myZoomNumber"></year> 

そして、ちょうど後世ため、ここでの作業スニペットがあります。

function EventsController() { 
 
    var $this = this; 
 

 
    var zoom = 1; 
 

 
    $this.zoom = zoom; 
 

 
    $this.zoomIn = function() { 
 
    zoom *= 1.1; 
 

 
    $this.zoom = zoom; 
 

 
    console.log({ 
 
     name: 'zoomIn', 
 
     value: zoom 
 
    }); 
 
    }; 
 

 
    $this.zoomOut = function() { 
 
    zoom *= 0.9; 
 

 
    $this.zoom = zoom; 
 

 
    console.log({ 
 
     name: 'zoomOut', 
 
     value: zoom 
 
    }); 
 
    }; 
 
} 
 

 
function YearDirective() { 
 
    return { 
 
    restrict: 'E', 
 
    template: '<h1 ng-transclude></h1>', 
 
    transclude: true, 
 
    scope: { 
 
     zoom: '=' 
 
    }, 
 
    link: function(scope, elem, attr) { 
 
     var target = elem.find('h1')[0]; 
 

 
     scope.$watch('zoom', function() { 
 
     var scaleStr = "scale(" + scope.zoom + "," + scope.zoom + ")"; 
 

 
     console.log({ 
 
      elem: target, 
 
      transform: scaleStr 
 
     }); 
 

 
     target.style.transform = scaleStr; 
 
     target.style.transformOrigin = 'left'; 
 
     }); 
 
    } 
 
    }; 
 
} 
 

 
var mod = angular.module('my-app', []); 
 

 
mod 
 
    .controller('eventsCtrl', EventsController) 
 
    .directive('year', YearDirective);

.scaling{ 
 
z-index:1000; 
 
position:fixed; 
 
top:10px; 
 
left:10px; 
 
} 
 

 
.behind{ 
 
    margin-top:50px; 
 
    z-index:-1; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
<div ng-app="my-app" ng-controller="eventsCtrl as $ctrl"> 
 

 
    <div class="scaling"> 
 
    <button type="button" aria-label="Zoom In" ng-click="$ctrl.zoomIn()">zoom_in</button> 
 
    <button type="button" aria-label="Zoom Out" ng-click="$ctrl.zoomOut()">zoom_out</button> 
 
    </div> 
 
    <div class="behind"> 
 
    <year zoom="$ctrl.zoom">year 1</year> 
 
    <year zoom="$ctrl.zoom">year 2</year> 
 
    <year zoom="$ctrl.zoom">year 3</year> 
 
    <year zoom="$ctrl.zoom">year 4</year> 
 
    </div> 
 

 
</div>

Answer 2

events.cssは、このように、それが唯一の最後の要素に適用すること、過だらけになっています。 bind it to current scope.