2

属性の存在を AngularJS の変数にバインドしたいと考えています。具体的にsandboxは、iframe. 私が$myCtrl.allowJavascript変数として持っているとしましょう、私はやりたいです:

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

のときにsandbox属性が存在し、 のときallowJavascript == falseにサンドボックス属性を非表示にしたいallowJavascript == true。

AngularJS にはこのためのメカニズムがありますか?

私が見つけた最も近いものはhereで、基本的に「特定の属性でのみ機能します」と書かれていますが、サンドボックスでは機能しません。

4

2 に答える 2

3

再利用性のために、これらの線に沿ってそれを一般的にすることができます：

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}">
于 2012-10-22T12:06:13.193 に答える
3

必要に応じて、このためのカスタム ディレクティブを作成できます。

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;
   };
});
于 2012-10-21T22:56:23.587 に答える