javascript - 根据收到的模型值加载不同模板的指令

Question

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

这是指令的模板 block 。

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);

   }

Answer 1

您的代码存在一些问题:

• 您不能将 ng-model 放在 div 标签上。
• 指令的模板函数签名是 function(tElement, tAttrs) { ，基本上它在编译阶段运行，并且 ngModelController 尚不可用。
• 您在指令内引用外部作用域变量 {{ Product.title }}，它将指令与外部作用域耦合起来。
• 您不需要使用 2 个类(true/false)

来自ngModel docs :

The ngModel directive binds an input,select, textarea (or custom form control) to a property on the scope using ngModelController, which is created and exposed by this directive.

来自$compile docs :

template

replace the current element with the contents of the HTML. The replacement process migrates all of the attributes / classes from the old element to the new one. See the Directives Guide for an example.

You can specify template as a string representing the template or as a function which takes two arguments tElement and tAttrs (described in the compile function api below) and returns a string value representing the template.

如何执行此操作的示例:

一个骗子: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">