Question

我想将属性的 presence 绑定到AngularJS中的变量。具体而言，sandbox为iframe。假设我有$myCtrl.allowJavascript作为变量，我想这样做：

<iframe src="..." sandbox />

sandbox时allowJavascript == false属性存在的位置，我希望沙箱属性在allowJavascript == true时消失。

AngularJS是否有此机制？

我能找到的最接近的是here，它基本上说“它只适用于某些属性” - 但不适用于沙箱。

Answer 1

如果您愿意，可以为此创建自定义指令。

app.directive('sandboxIf', function() {
  return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
            /* eval whatever was passed to sandbox-if="" 
               to see if it's true or false. */
            if(scope.$eval(attr.sandboxIf)) {
                elem.attr('sandbox','sandbox'); //sandbox="sandbox"
            }else{
                elem.removeAttr('sandbox');
            }
        }
    };
});

使用就像：

<iframe sandbox-if="foo"></iframe>

甚至

<iframe sandbox-if="test()"></iframe>

控制器就像

app.controller('MyCtrl', function($scope) {
   $scope.foo = true;

   $scope.test = function() {
       return true;
   };
});

Answer 2

对于可重用性，您可以按照以下方式使其具有通用性：

app.directive("addAttr", function() {
  return function(scope, element, attrs) {
    scope.$watch(attrs.addAttr, function(addAttr) {
      for (var key in addAttr) {
        if (addAttr[key]) element.attr(key, true);
        else element.removeAttr(key);
      }
    }
  }
}

您可以使用它：

<iframe add-attr="{sandbox: allowJavaScript, someOtherAttr: someOtherVar}">

AngularJS绑定属性存在

2 个答案: