Вставьте директиву в DOM, используя jqlite

0

Мне нужно использовать jqlite для вставки HTML для директивы, но по какой-то причине директива не вставляет шаблон.

<div ng-app="docsSimpleDirective">
  <div ng-controller="Controller">
      <button ng-click="showCustomer($event)">click to see the customer</button>
  <div>
</div>

И мой app.js выглядит так:

angular.module('docsSimpleDirective', [])
       .controller('Controller', ['$scope', function ($scope) {

          $scope.customer = {
             name: 'Naomi',
             address: '1600 Amphitheatre'
          };

          $scope.showCustomer = function($event) {
             angular.element($event.currentTarget).next().html("<div my-customer></div>");
          };
       }])
       .directive('myCustomer', function () {
          return {
          template: 'Name: {{customer.name}} Address: {{customer.address}}'
       };
});

http://jsfiddle.net/4nad43gn/

ПРИМЕЧАНИЕ. Это просто попытка воссоздать ситуацию, в которой я вхожу, но директива должна быть вставлена в DOM аналогично вышеизложенному - в противном случае она не будет работать для моей ситуации.

Теги:
angularjs-directive

2 ответа

1
Лучший ответ

Как упоминает Michelem, лучший способ сделать манипуляции с DOM - использовать директиву.

Если вы все еще хотите сделать это, используя контроллер, вы можете взглянуть на мой пример: http://jsfiddle.net/4nad43gn/3/

$scope.showCustomer = function($event) {
   var element = document.querySelectorAll('[ng-controller=Controller] div');
   var tpl = $compile( "<div my-customer=''></div>" )( $scope );
   element[0].appendChild(tpl[0]);
};

Вам нужно добавить компиляцию $ в ваше приложение. Возможно?

Поделиться
  • 0
    Да! это именно то, что мне было нужно, спасибо :-)
  • 0
    Добро пожаловать :)
0

Не знаю, почему вы это сделали, но это проще:

JSFiddle

HTML:

<div ng-app="docsSimpleDirective">
    <div ng-controller="Controller">
        <button ng-click="showCustomer = true">click to see the customer</button>
        <div my-customer ng-show="showCustomer"></div>
    </div>
</div>

JS:

angular.module('docsSimpleDirective', [])
    .controller('Controller', ['$scope', function ($scope) {

    $scope.customer = {
        name: 'Naomi',
        address: '1600 Amphitheatre'
    };

    $scope.showCustomer = false;
}])
.directive('myCustomer', function () {
    return {
        template: 'Name: {{customer.name}} Address: {{customer.address}}'
    };
});

PS вы также можете использовать ng-if вместо ng-show если вы не хотите, чтобы элемент (вместо этого был скрыт) до щелчка.

Поделиться
  • 0
    Пожалуйста, прочитайте заметку. «ПРИМЕЧАНИЕ. Это просто попытка воссоздать ситуацию, в которой я нахожусь, но директива должна быть вставлена в DOM аналогично описанному выше - в противном случае она не будет работать для моей ситуации».
  • 0
    Это не правильный путь, вам следует избегать манипуляций с DOM из контроллера, тогда я сомневаюсь, что вы можете вводить и добавлять элементы так, как вам хочется, и обрабатывать их из директивы.
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню