次のようなモジュールパターンを公開しています。
'use strict';
angular.module('app', [])
.directive('myDirective', ['SomeDep', function (SomeDep) {
var linker = function (scope, element, attr) {
// some work
};
return {
link: linker,
restrict: 'E'
};
}])
;
私が問題を抱えているのは、これに$ watchを統合することです。 「$ window」サービスを使用して、特にウィンドウのサイズ変更を監視します。
[編集]:
私はこれまでずっと自分の問題が何であるかを理解していました...属性として実装していることを忘れていたとき、私は要素に制限していました... @ _ @;
$ watchは必要ありません。ウィンドウのサイズ変更イベントにバインドするだけです:
'use strict';
var app = angular.module('plunker', []);
app.directive('myDirective', ['$window', function ($window) {
return {
link: link,
restrict: 'E',
template: '<div>window size: {{width}}px</div>'
};
function link(scope, element, attrs){
scope.width = $window.innerWidth;
angular.element($window).bind('resize', function(){
scope.width = $window.innerWidth;
// manuall $digest required as resize event
// is outside of angular
scope.$digest();
});
}
}]);
resize
イベントをリッスンして、ディメンションが変更された場所で起動できます
指令
(function() {
'use strict';
angular
.module('myApp.directives')
.directive('resize', ['$window', function ($window) {
return {
link: link,
restrict: 'A'
};
function link(scope, element, attrs){
scope.width = $window.innerWidth;
function onResize(){
// uncomment for only fire when $window.innerWidth change
// if (scope.width !== $window.innerWidth)
{
scope.width = $window.innerWidth;
scope.$digest();
}
};
function cleanUp() {
angular.element($window).off('resize', onResize);
}
angular.element($window).on('resize', onResize);
scope.$on('$destroy', cleanUp);
}
}]);
})();
HTMLで
<div class="row" resize> ,
<div class="col-sm-2 col-xs-6" ng-repeat="v in tag.vod">
<h4 ng-bind="::v.known_as"></h4>
</div>
</div>
コントローラー:
$scope.$watch('width', function(old, newv){
console.log(old, newv);
})
//以下はangular 2.0で、タグごとに要素を指定するためにスクロールバーを調整するウィンドウのサイズ変更のディレクティブです。
---- angular 2.0 window resize directive.
import { Directive, ElementRef} from 'angular2/core';
@Directive({
selector: '[resize]',
Host: { '(window:resize)': 'onResize()' } // Window resize listener
})
export class AutoResize {
element: ElementRef; // Element that associated to attribute.
$window: any;
constructor(_element: ElementRef) {
this.element = _element;
// Get instance of DOM window.
this.$window = angular.element(window);
this.onResize();
}
// Adjust height of element.
onResize() {
$(this.element.nativeElement).css('height', (this.$window.height() - 163) + 'px');
}
}