使用双花​​括号的Angularjs插值在ng-if下不起作用

Question

更新1:开发了将重现该问题的 plunker 样本。见下文。

我的项目中有一个奇怪的问题，它只出现在一个地方。最后，我能够使用 plunker 示例重现该问题:

http://plnkr.co/edit/JJbq54?p=preview

在上面的示例中，请参阅“With ng-if”和“Without ng-if”部分，在输入文本中输入一些内容，看看双花括号如何在 ng-if 下不起作用, 但是 ng-bind工作正常。此外，如果您删除 check-if-required来自模板 sites-and-improvements.html问题也解决了。

更多详情如下:

我有以下 HTML5 代码块:

    <div ng-if="isFullCUSPAP" id="sites_and_imrpovements_comments">
        <div class="form-row">
            <div class="inputs-group">
                <label>WIND TURBINE:</label>
                <div class="input-binary">
                    <label>
                       <input type="radio" id="wind_turbine" 
                              name="wind_turbine"
                              ng-model="$parent.wind_turbine" 
                              value="Yes" force-model-update />
                       Yes
                    </label>
                </div>
                <div class="input-binary">
                    <label>
                      <input type="radio" id="wind_turbine"
                             name="wind_turbine" 
                             ng-model="$parent.wind_turbine" 
                             value="No" force-model-update />
                      No
                    </label>
                </div>
                <span ng-bind="wind_turbine"></span>
                <span>wind_turbine = {{wind_turbine}}</span>
            </div>
        </div>
    </div>

我知道ng-if将创建一个新的子范围。见上面代码，作用域变量wind_trubine .仅在此 HTML5 文件中，大括号 {{}}不管用。但是，如果我使用 ng-bind它工作正常。在其他 HTML5 文件中，我没有任何问题。这个 HTML5 是使用指令实现的，如下所示:

app.directive('sitesAndImprovements', function() {
    return {
        restrict: 'E',
        replace:true,
        templateUrl: '<path-to-file>/site-and-improvments.html',
        link: function (scope, elem, attrs) {
            //Business Logic for Sites and Improvements
        }
    } 
})

而且，简单地说，我把它放在父级中，如下所示:

<sites-and-improvements></sites-and-improvements>

我能看到的唯一区别是这个实现有两层嵌套 ng-if ，如下所示:

<div ng-if="some_expression">
    ...
    ...
    <sites-and-improvements></sites-and-improvements>
    ...
    ...
</div>

根据评论，我使用了 controller As符号和定义MainController因此。请参阅下面的快照。 ng-if 好像有问题嵌套了两层。范围变量完全混淆了。我使用 ng-bind 没有得到相同的结果和双花括号。








如果您检查上述快照，即使我使用了 controller As符号，您将看到 ng-bind与使用 {{}} 的插值相比，给出不同的结果.

我什至更改了 wind_turbine 的默认值在链接函数中设置如下:

scope.MainController.wind_turbine = 'Yes';

我注意到在页面加载时，一切看起来都很好，但是当我更改输入元素的值时 wind_trubine使用鼠标，所有相关引用都正确更新，除了使用 {{}} 的引用。 .

也许这是因为 ng-if 有两个嵌套级别?

感谢您的反馈。

塔雷克

Answer 1

删除 replace: true来自 sites-and-improvements指示:

app.directive('sitesAndImprovements', function() {
    return {
        restrict: 'E',
        ̶r̶e̶p̶l̶a̶c̶e̶:̶t̶r̶u̶e̶,̶
        templateUrl: 'site-and-improvments.html',
        link: function (scope, elem, attrs) {
          //debugger;
        }
    } 
})

它正在与 check-if-required 战斗指示:

app.directive('checkIfRequired', ['$compile', '$timeout', function ($compile, $timeout) {
  return {
    priority: 2000,
    terminal: true,
    link: function (scope, el, attrs) {
      el.removeAttr('check-if-required');

      $timeout(function(){
        //debugger;
        $(':input', el).each(function(key, child) {
          if (child && child.id === 'test_me') {
                angular.element(child).attr('ng-required', 'true');
                }
          if (child && child.id === 'testInput1') {
            //debugger;
                //angular.element(child).attr('ng-required', 'true');
                }
        });
            $compile(el, null, 2000)(scope);
      })
    }
  };
}])

DEMO on PLNKR .

replace:true is Deprecated
从文档:

replace ([DEPRECATED!], will be removed in next major release - i.e. v2.0)

specify what the template should replace. Defaults to false.

• true - the template will replace the directive's element.
• false - the template will replace the contents of the directive's element.

-- AngularJS Comprehensive Directive API - replace deprecated
来自 GitHub:

Caitp-- It's deprecated because there are known, very silly problems with replace: true, a number of which can't really be fixed in a reasonable fashion. If you're careful and avoid these problems, then more power to you, but for the benefit of new users, it's easier to just tell them "this will give you a headache, don't do it".

-- AngularJS Issue #7636
如需更多信息，请参阅 Explain replace=true in Angular Directives (Deprecated)