AngularJS指令 - 如何有条件地应用模板？ [英] AngularJS Directives - How to conditionally apply a template?

问题描述

<大骨节病> DEMO

考虑以下指令：

  angular.module（'MyApp的'）。指令（maybeLink'，函数（）{
  返回{
    更换：真实，
    范围： {
      maybeLink：'='，
      maybeLinkText：'='
    }，
    模板：'＆LT;跨度＆GT;' +
              '＆LT;跨度NG隐藏=maybeLinkNG绑定-HTML =TEXT＆GT;＆LT; / SPAN＆GT;' +
              '＆LT;一个NG秀=maybeLink的href =＃NG绑定-HTML =TEXT＆GT;＆LT; / A＆GT;' +
              '＆所述; /跨度＆GT;'，
    控制器：函数（$范围）{
      $ scope.text = $ scope.maybeLinkText.replace（/ \\ n /克，'＆LT; BR＆GT;'）;
    }
  };
}）;
 

该指令增加了两个＆LT;跨度＆GT; 和＆LT; A＆GT; 到DOM（仅一个是在同一时间可见）。

我怎么能改写指令，这样它会增加为＆LT;跨度＆GT; 或＆LT; A＆GT; 到DOM，但不能两者兼而有之？

---

更新

OK，我想我可以使用 NG-如果这样的：

 模板：'＆LT;跨度＆GT;' +
          '＆LT;跨度NG-IF =maybeLink！NG绑定-HTML =TEXT＆GT;＆LT; / SPAN＆GT;' +
          '＆LT;一个NG-IF =maybeLink的href =＃NG绑定-HTML =TEXT＆GT;＆LT; / A＆GT;' +
          '＆LT; / SPAN＆GT;'
 

但是，一个人如何能摆脱周边＆LT;跨度＆GT;在这种情况下

---

更新2

下面是一个使用 $编译指令的一个版本。它没有周边＆LT;跨度＆GT; ，但双向数据绑定也不起作用。我真的很想知道如何解决的双向数据绑定问题。任何想法？

<大骨节病> 演示

  angular.module（'MyApp的'）。指令（maybeLink'，函数（$编译）{
  返回{
    范围： {
      maybeLink：'='，
      maybeLinkText：'='
    }，
    链接：功能（范围，元素，ATTRS）{
      scope.text = scope.maybeLinkText.replace（/ \\ n /克，'＆LT; BR＆GT;'）;      如果（scope.maybeLink）{
        element.replaceWith（编译$（'＆LT; A HREF =＃NG绑定-HTML =TEXT＆GT;＆LT; / A＆GT;'）（范围））;
      }其他{
        element.replaceWith（编译$（'＆LT;跨度NG绑定-HTML =TEXT＆GT;＆LT; / SPAN＆GT;'）（范围））;
      }
    }
  };
}）;
 

解决方案

您可能能够使用模板 功能即可。按照文档：

  

您可以指定模板作为字符串重新presenting模板或为一个函数，它需要两个参数tElement和tAttrs（下编译函数API描述）并返回一个字符串值，再presenting模板

---

 函数resolveTemplate（tElement，tAttrs）{}angular.module（'MyApp的'）。指令（maybeLink'，函数（）{
  返回{
    // ...
    模板：resolveTemplate，
    // ...
  };
}）;
 

DEMO

Consider the following directive:

angular.module('MyApp').directive('maybeLink', function() {
  return {
    replace: true,
    scope: {
      maybeLink: '=',
      maybeLinkText: '='
    },
    template: '<span>' + 
              '  <span ng-hide="maybeLink" ng-bind-html="text"></span>' +
              '  <a ng-show="maybeLink" href="#" ng-bind-html="text"></a>' +
              '</span>',
    controller: function($scope) {
      $scope.text = $scope.maybeLinkText.replace(/\n/g, '<br>');
    }
  }; 
});

The directive adds both the <span> and the <a> to the DOM (only one is visible at a time).

How could I rewrite the directive such that it will add either <span> or <a> to the DOM, but not both?

---

UPDATE

OK, I guess I could use ng-if like that:

template: '<span>' + 
          '  <span ng-if="!maybeLink" ng-bind-html="text"></span>' +
          '  <a ng-if="maybeLink" href="#" ng-bind-html="text"></a>' +
          '</span>'

But, how could one get rid of the surrounding <span> in this case?

---

UPDATE 2

Here is a version of the directive that uses $compile. It doesn't have the surrounding <span>, but the two way data binding doesn't work either. I'm really interested to know how to fix the two way data binding issue. Any ideas?

DEMO

angular.module('MyApp').directive('maybeLink', function($compile) {
  return {
    scope: {
      maybeLink: '=',
      maybeLinkText: '='
    },
    link: function(scope, element, attrs) {
      scope.text = scope.maybeLinkText.replace(/\n/g, '<br>');

      if (scope.maybeLink) {
        element.replaceWith($compile('<a href="#" ng-bind-html="text"></a>')(scope));
      } else {
        element.replaceWith($compile('<span ng-bind-html="text"></span>')(scope));  
      } 
    } 
  }; 
});

解决方案

You might be able to use a template function. According to the docs:

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.

---

function resolveTemplate(tElement, tAttrs) {

}

angular.module('MyApp').directive('maybeLink', function() {
  return {
    //...
    template: resolveTemplate,
    //...
  }; 
});

这篇关于AngularJS指令 - 如何有条件地应用模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！