2

我正在编写一个由内联编辑器组成的指令。当没有值时，将出现编辑框。当有值时，将出现一个常规跨度。

这是指令的模板块。

template: function (element,attrs) {

    if (1 === 2) {
        return "<div class='true'>{{product.title}}</div>";
    } else {
        return "<div class='false'>{{product.title}}</div>";
    }

}

上面的代码有效，但条件将基于收到的模型值，我 ngModel之前通过了，但它没有工作：

require: '?ngModel',

template: function (element,attrs,ngModel) {

    if (ngModel.$modelValue !== null) {
        return "<div class='true'>{{product.title}}</div>";
    } else {
        return "<div class='false'>{{product.title}}</div>";
    }

}

HTML：

<div inline-editor ng-model="product.title"></div>

如何获取 AngularJS 指令以根据模型值加载不同的模板？

编辑：谢谢大家的回答！，我接受了你的意见，现在我有以下代码。为我工作到现在，我将继续努力。

return {
    restrict: "A",
    require: '?ngModel',
    link: function (scope, element, attrs, ngModel) {

        if (!ngModel) return;       

        //Formatter
        function writeElement (value) {

            var template;

            if (value !== null) {
                template = "<span>" + value + "</span>";
            } else {
                //template for false
            }

            element.replaceWith(template);
        }

        ngModel.$formatters.push(writeElement);

   }
4

2 回答 2

3

您的代码存在一些问题：

  • 您不能放置ng-modeldiv 标签。
  • 指令的模板函数签名是function(tElement, tAttrs) {，基本上它在编译阶段运行，并且 ngModelController 尚不可用。
  • 您在指令中引用了一个外部范围变量，该变量{{ product.title }}将您的指令与外部范围耦合。
  • 您不需要使用 2 个类（true / false）

来自ngModel 文档：

ngModel 指令使用 ngModelController 将输入、选择、文本区域（或自定义表单控件）绑定到范围上的属性，该属性由该指令创建和公开。

来自$compile 文档：

模板

用 HTML 的内容替换当前元素。替换过程将所有属性/类从旧元素迁移到新元素。有关示例，请参见指令指南。

您可以将模板指定为表示模板的字符串或作为接受两个参数 tElement 和 tAttrs（在下面的编译函数 api 中描述）并返回表示模板的字符串值的函数。

你可以如何做到这一点的一个例子：

一个笨蛋： http ://plnkr.co/edit/UPbLXoucVCQXvPmm6BuZ?p=preview

指示：

app.directive('inlineEditor',function($compile){
  return {
    scope: {
      model: "=ngModel"
    },
    require: 'ngModel',
    compile: function(tElm,tAttrs) {
      var editor = angular.element("<div ng-class='{showEditor: model}'>{{model}}</div>");
      var linkFn = $compile(editor);
      return function (scope,elm,attrs,ngModel){
        linkFn(scope);
        elm.after(editor);
      }      
    }
  }
})

CSS：

.showEditor {
  border: 1px solid red;
  height: 100px;
}

html:

<input inline-editor ng-model="product.title">
于 2014-01-27T15:10:02.693 回答
0

我认为这个逻辑不属于template函数，而是属于template它本身：

template:
  '<div class="true"  ng-if="product.title == null">{{product.title}}</div>' +
  '<div class="false" ng-if="product.title != null">{{product.title}}</div>'
于 2014-01-27T15:04:39.700 回答