0

无法使用指令绑定模板上的属性

我似乎无法使用指令绑定模板上的属性。任何帮助或建议都会很棒！

它给了我这个错误：

[$parse:syntax] 语法错误：从 [{$ctrl.CalendarOpen}}] 开始的表达式 [{{$ctrl.CalendarOpen}}] 的第 2 列中的标记“{”无效键。

这是我的指令：

app.directive('datePickerDirective', [function () {
    return {
        restrict: 'AE',
        scope: {
          
        },
        template: `
            <input type="text" class="form-control"
                   uib-datepicker-popup="shortDate"
                   name="date" is-open="{{$ctrl.CalendarOpen}}"
                   ng-model="test" datepicker-options="dateOptions"
                   ng-required="true" close-text="Close" />`,
        controller: function() {
            var $ctrl = this;
            $ctrl.CalendarOpen = true
        },
        controllerAs: '$ctrl',
    }
}]);
4

1 回答 1

0

从属性中删除双花{{括号：is-open

template: `
    <input type="text" class="form-control"
           uib-datepicker-popup="shortDate"
           ̶n̶a̶m̶e̶=̶"̶d̶a̶t̶e̶"̶ ̶i̶s̶-̶o̶p̶e̶n̶=̶"̶{̶{̶$̶c̶t̶r̶l̶.̶C̶a̶l̶e̶n̶d̶a̶r̶O̶p̶e̶n̶}̶}̶"̶
           name="date" is-open="$ctrl.CalendarOpen"
           ng-model="test" datepicker-options="dateOptions"
           ng-required="true" close-text="Close" />`,

该uib-datepicker-popup指令试图使用$parse 服务is-open评估属性，并且以非法开头的Angular 表达式。{{

从文档：

错误：$parse:syntax 语法错误

描述

在表达式中存在语法错误时发生。编译表达式时会引发这些错误。错误消息包含更精确的错误描述，包括表达式中发生错误的位置（列）。

要解决此问题，请了解有关AngularJS 表达式的更多信息，识别错误并修复表达式的语法。

— AngularJS 错误参考 - $parse:syntax Error

如果我添加一个id="{{$ctrl.CalendarOpen}}"，它不会给我那个错误

在这种情况下，没有错误，因为没有解析id属性的指令。双花{{括号内的表达式正在由$interpolate服务评估，转换为文本，并插入到 DOM 中。

当指令将属性解析为Angular Expression时，将插值混合到该表达式中是不明智的。

从文档：

为什么混合插值和表达式是不好的做法：

  • 它增加了标记的复杂性
  • 不能保证它适用于每个指令，因为插值本身就是一个指令。如果另一个指令在插值运行之前访问属性数据，它将获得原始插值标记而不是数据。
  • 它会影响性能，因为插值会在范围内添加另一个观察者。
  • 由于这不是推荐的用法，我们不对此进行测试，对 AngularJS 核心的更改可能会破坏您的代码

— AngularJS 开发人员指南 - 混合插值和表达式是不好的做法

于 2018-02-22T17:27:02.373 回答