Question

我修改了popover指令以包含文件和$编译它们。有了这个，我已经重复使用了，但尝试添加一个预先输入将不起作用。

angular.module("app").directive("boundPopover", ['$compile', '$http', function($compile, $http) {
  return {
    restrict: 'A',
    link: function(scope, element, attr, ctrl) {
      var content = attr["popoverContent"];
      var title = attr["popoverTitle"];

      function initPopup() {

        element.popover({
          html: true,
          content: $compile(content)(scope),
          title: $compile(title)(scope),
          placement: attr["popoverPlacement"]
        });
      };

      if(attr["popoverContentInclude"] || attr["popoverTitleInclude"]) {
        var contentLoaded = false;
        var titleLoaded = false;

        if(!attr["popoverContentInclude"]) {
          contentLoaded = true;
        }

        if(!attr["popoverTitleInclude"]) {
          titleLoaded = true;
        }

        if(!contentLoaded) {
          $http.get(attr["popoverContentInclude"]).success(function(d) {
            content = d;

            contentLoaded = true;
            if(titleLoaded) {
              initPopup();
            }
          });
        }

        if(!titleLoaded) {
          $http.get(attr["popoverTitleInclude"]).success(function(d) {
            title = d;

            titleLoaded = true;
            if(contentLoaded) {
              initPopup();
            }
          });
        }
      }
      else
      {
        initPopup();
      }
    }
  }
}]);

包含的标题文件是 -

<span class="glyphicon glyphicon-search"></span><input class='devices-search' ng-controller="DeviceCtrl" typeahead="state for state in states | filter:$viewValue | limitTo:10" ng-model="state"/>

直接放在页面上或在ng-include中，但在这种情况下不起作用。知道我能做什么吗？

Answer 1

我在typeahead指令源中找到了答案。你只需要在输入中使用一些容器，比如

var el = angular.element('<div><input type="text" typeahead="value in values" /></div>');
var compiled = $compile(angular.element('<div>').append(el).html())($scope)
myElement.append(compiled);

为什么会这样？

所以，你创建了你的元素

var el = angular.element('<input type="text" typeahead="value in values" />');

然后编译它并附加到你的元素

var compiled = $compile(angular.element('<div>').append(el).html())($scope)
myElement.append(compiled);

在编译时，typeahead指令试图添加typeahead-popup，如

yourNewElement.after(popup)

但是你的新元素没有父母，所以弹出窗口就丢失了。

$ compile之后Angular Typeahead不工作

1 个答案: