Question

我已经找到了一些答案 - 尝试过但是没有一个对我有用。

我有以下div，我使用属性equalizer：

<div class="text-center" equalizer='group'>

但是，如果窗口宽度为＆gt;我只希望存在该属性equalizer。 400。

所以我也在我的控制器中使用这段代码：

$scope.windowWidth = $window.innerWidth;

$window.onresize = function(event) {
        $timeout(function() {
          $scope.windowWidth = $window.innerWidth;
        });
};

现在我知道我可以这样做：

equalizer="{{ windowWidth>400 ? 'group' : ''}}"

然而问题是我是否仍然在equalizer仍然应用了值 - 即<div class="text-center" equalizer=''>与<div class="text-center" equalizer='group'>

相同

那么如何完全控制是否插入该属性？

添加我唯一的解决方案是复制代码和使用ng-if

所以：

<div ng-if="windowWidth<400" class="text-centre">

和

<div ng-if="windowWidth>=400" class="text-center" equalizer='group'>

感谢。

Answer 1

我会创建一个resize指令来更新一个范围变量，你可以在你的均衡器指令中检查它。

我不完全确定你的均衡器指令在做什么，但是下面的演示（或者在这个fiddle中）应该有效。

在演示中我将删除均衡器指令，以测试是否使用该指令删除了resize事件。

添加指令看起来像下面未经测试的代码，但我会像在ng-if的演示中那样做：

var childScope = $scope.$new();
var directiveElement = angular.element('<equalizer></equalizer>');
$document.append($compile(directiveElement)(childScope));

（Here是Google发现的用于动态添加指令的演示。）

angular.module('demoApp', [])
    .controller('mainController', function($scope) {
        $scope.equalizerOptions = {
            group: true
        };
        $scope.removeEqualizer = function() {
            // just for testing if resize handler is removed
            var equalizer = angular.element(document).find('equalizer');
            //console.log(angular.element(document).find('equalizer').scope());
            equalizer.scope().$destroy();
            equalizer.remove();
        }
    })
    .directive('equalizer', equalizerDir)
    .directive('resize', resizeDir);

function resizeDir($window) {
    return {
        link: function(scope, element, attrs) {
            scope.window = {};

            function onResize(event) {
                //console.log('Resized', scope, element, event);
                scope.window.width = $window.innerWidth;
            }

            $window.onresize = function(evt) {
                //console.log('Resize');
                scope.$apply(onResize);
            };

            onResize(); //initial call

            scope.$on('$destroy', function() {
                //console.log('destroy dir');
                $window.onresize = undefined;
            });
        }
    };
}

function equalizerDir($timeout) {
    return {
        scope: {
            options: '=',
            width: '@'
        },
        template: '<div ng-if="width >= 400"><h2>equalizer with ng-if & resize dir</h2>' +
            '<p>{{options.group ? \'grouped\': \'not grouped\'}}</p></div>',
        link: function(scope, element, attrs) {
            /*scope.$watchCollection('options', function() {
            	// would work but watch with ternary operator directly in markup is easier
            	scope.text = scope.options.group ? 'grouped': 'not grouped';  
            });*/
        }
    };
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<div ng-app="demoApp" ng-controller="mainController">
  window width debugging: {{window.width}}
  <equalizer options="equalizerOptions" width="{{window.width}}" resize>
  </equalizer>

  <button ng-click="equalizerOptions.group = !equalizerOptions.group">
    toggle group
  </button>
  <button ng-click="removeEqualizer()">
    remove equalizer (test unbinding resize)
  </button>
</div>

角度 - 基于窗口宽度添加属性

1 个答案: