Javascript 选择指令的角度表达式_Javascript_Angularjs

Javascript 选择指令的角度表达式

javascript angularjs

Javascript 选择指令的角度表达式,javascript,angularjs,Javascript,Angularjs,我需要呈现一个angular指令，通过调用先前在变量（通常在控制器中声明）处定义的字符串来选择它。尽管这样的变量可以作为角度表达式访问，但当我尝试使用它来选择指令时，它不起作用： <!DOCTYPE html> <html ng-app="app"> <body ng-controller="TextController">  <div>Value of item: {{

我需要呈现一个angular指令，通过调用先前在变量（通常在控制器中声明）处定义的字符串来选择它。尽管这样的变量可以作为角度表达式访问，但当我尝试使用它来选择指令时，它不起作用：

<!DOCTYPE html>
<html ng-app="app">
<body ng-controller="TextController">

<!-- item.dir is accessible: -->
<div>Value of item: {{item.dir}}</div>

<!-- It works. the directive "hello" is rendered -->
<div class="hello"></div>
<hello></hello>

Here you should see additional text:
<!-- Doesn't work item.dir is not recognized-->
<!-- as a class -->
<div class="{{item.dir}}"></div>

<!-- as an attribute-->
<div {{item.dir}}></div>

<!-- trying ng-class (it fails)-->
<div ng-class="item.dir"></div>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.5/angular.min.js"></script>

<script>

  var appModule = angular.module('app', []);

  // The directive to render
  appModule.directive('hello', function() {
        return {
          restrict: 'ACE',
          template: '<div>works: Transcoded text</div>',
          replace: true
        };
      });

  appModule.controller('TextController', function ($scope) {
    $scope.item = {dir: 'hello'}; // the name of the directive, the idea is to use it for referring to many future directives.
  });
</script>
</body>
</html>


项的值：{{item.dir}
在这里，您将看到其他文本：
var-appModule=angular.module（'app'，[]）；
//要呈现的指令
指令（'hello'，function（）{
返回{
限制：“ACE”，
模板：“作品：转码文本”，
替换：正确
};
});
appModule.controller（'TextController'，函数（$scope）{
$scope.item={dir:'hello'}；//该指令的名称，其思想是用于引用许多未来的指令。
});

下面是一段代码：

那么，我错过了什么？使用指令时，如何使用字符串插值获得角度？谢谢

要使指令起作用，Angular需要编译html（加载页面时自动完成）

有一种方法可以自由地控制实例化哪个指令，这有点像把地毯拉到脚下，这是不典型的。问题之一是编译“破坏”了内部绑定/观察者数据和一些原始DOM，因此没有足够的信息“重新编译”DOM节点

注意：您不能使用这种类型的绑定更改属性或元素名称（仅属性值）：{{{}，但ng class=“…”和class=“{…}”有效

我不明白你到底想达到什么目的。如果目的真的是修改item.dir的值并“重新配置”应用程序，那么这是“可能的”，但我高度怀疑这会导致“状态”缺陷

然而，这里有一个正在工作的“hack”，它“记住”原始domhtml，并在需要时重新编译它。这分为两个编译阶段：第一阶段是恢复原始绑定，第二阶段在$digest循环之后运行，以便原始绑定完成从作用域填充类名（即使item.dir生效）。当然，缺点是如果您对封闭的DOM进行了修改，这将擦除它们！或者，也可以只记住特定的属性，并在保持DOM的其他部分完好无损的情况下恢复“该属性”（但可能会产生其他问题）

…用作要执行操作的DOM部分的封闭标记。当表达式更改时，它将“还原并重新编译”其下的所有内容。（此处为“项目目录”）：

很明显，这就是关键。

为什么投票被否决？我真的很好奇为什么这不起作用。如果你要投否决票，至少提供一个理由？为什么你说这是非典型的？例如，如何让用户向表单动态添加字段？（假设每个字段对应一个指令），当然，如果您有一组有限的指令，隐藏/显示可以做到这一点，但这不是问题的核心。要支持常见的用例，例如动态向表单添加自定义字段。这可能是关于添加/替换/删除“标记”（通过指令内的模板，ng repeat with ng bindHtml）。非典型的是，标记已经加载，然后去修改“它的性质”（交换正在为特定元素动态加载的指令）。这不是不可能的，只是不是框架的构建方式。很抱歉，我在之前关于ng bindHtml的评论中有一个错误（ng bindHtml将清理html，因此不会真正编译任何东西），相反，您可以使用一个像这里描述的那样的自定义指令：这是一个修改过的Plunker，它使用一个作为指令的动态属性将编译过的标记插入DOM。（点击）

  appModule.directive('forceRecompilation', ['$timeout', '$compile', function($timeout, $compile) {
    return {
      restrict: 'A',
      link: function(scope, element, attr) {

        var originalHtml = element.html();

        scope.$watch(attr.forceRecompilation, function(){
            // restore original HTML and compile that
            element.html(originalHtml);
            $compile(element.contents())(scope);

            // wait for all digest cycles to be finished to allow for "binding" to occur
            $timeout(function(){
              // recompile with bounded values
              $compile(element.contents())(scope);
            });
          });
      }
    };
  }]);

<div force-recompilation="item.dir">
    <div class="{{item.dir}}">
</div>