Question

我想从我网站的顶层关闭角度插值，但为单个元素重新启用它。

我正在尝试向一个相当大的旧网站添加一些角度功能，并且在可能包含ng-non-bindable括号的任何地方添加{{bindable}}是不可行的。这一点尤为重要，因为该网站可能在这些括号内有{{unparseable:er9 >-14?%(% randomness}}。（Angular为此抛出[$ parse：syntax]错误并停止解析我页面的任何其余部分）

理想情况下，我会在每个页面上设置类似<html ng-app="MyApp" ng-non-bindable>的内容，然后在实际使用角度的几个地方设置<div ng-controller="myController">。

到目前为止，我还没有想出办法。我看着改变角度解析器忽略文本节点，直到它看到一个控制器，但这似乎有点过分。我还尝试将ng-app仅添加到我希望应用程序存在的节点上，但我必须使用应用程序手动引导每个节点，我认为这会导致我同时运行应用程序的多个副本我希望的任何单例（例如缓存）会被多次实例化（除非我对此有误？）

有没有办法将ng-app和ng-non-bindable放在顶层<html>，然后手动将我关心的div添加到应用中？

我设置了一个简单示例的plunkr：http://plnkr.co/edit/antMrWmWnKXHcxklh9IY?p=preview

Answer 1

Michal Charemza上面的评论让我找到了一个有效的解决方案。

我写了一个终端指令，它编译并附加到（使用jquery）中$rootScope每个[ng-bindable]元素：

app.directive('defaultNonBindable', ['$compile', '$rootScope', 
  function($compile, $rootScope) {
    return {
      compile: function(scope, elm, attrs) {
        var bindables = $('[ng-bindable]');
        bindables.each( function() {
              var el = angular.element(this),
              compiled = $compile(el);
          compiled($rootScope);
        });
      },
      terminal: true,
    }
  }
]);

然后我将每个在有角度绑定的div中包含角度的块包裹起来：

<div ng-bindable>
    <div ng-controller="MyController">
       {{this_works}}
    </div>
</div>

我已经将原始的plunkr分为一个工作示例：http://plnkr.co/edit/2rWCy7dwJNqTShXKiLgG?p=preview

Answer 2

一种可能的解决方案是以某种方式配置角度，它不是寻找花括号，而是您自己的内插特殊语法。

var myApp = angular.module('App', []);
myApp.config(function($interpolateProvider) {
          $interpolateProvider.startSymbol('[[');
          $interpolateProvider.endSymbol(']]');
});
myApp.controller("Ctrl", function($scope){
  $scope.value="value";
});

<div>[[value]]</div>

Plunker

我没有对它进行测试，可能会有一些副作用，特别是对于第三方代码，但它可能是管理过渡阶段的一种方式

问候

仅在特定的DOM层次结构上启用angularjs？

2 个答案: