Как заполнить HTML-div для события click, используя Angularjs

Question

Как заполнить HTML-div для события click, используя Angularjs

0

Каков наилучший способ заполнить div (или ng-include) готовым шаблоном .html, используя anuglarjs, не используя ng-view и маршрутизацию?

Например:

<div>
    <ng-include src="" />
</div>

<input type="button" ng-click="getTemplate()" value="Get template" />

$scope.getTemplate = function() {
   //Get and..populate template here
}

MrProgram 01 апр. 2016, в 14:06

Источник

1

ng-if/ng-show/ng-hide ?
The Reason 01 апр. 2016, в 11:13

Теги:

javascript

html

angularjs

2 ответа

2

Используйте ng-if или ng-show:

<div ng-if="templateVisible">
    <ng-include src="" />
</div>

<input type="button" ng-click="getTemplate()" value="Get template" />

$scope.getTemplate = function() {
   $scope.templateVisible = true;
}

И используя ng-show:

<div ng-show="templateVisible">
    <ng-include src="" />
</div>

<input type="button" ng-click="getTemplate()" value="Get template" />

$scope.getTemplate = function() {
   $scope.templateVisible = true;
}

Разница между ними заключается в том, что ng-if не заполняет DOM, когда условие ложно, а ng-show делает, но отмечает его как display: none.

Luka Jacobowitz 01 апр. 2016, в 09:12

Ещё вопросы

The Reason · Accepted Answer · 2016-04-01T09-40-00.000Z

Использование ng-show/ng-hide/ng-if

<div ng-controller="TodoCtrl">
  <div ng-show="show">Hello</div>
  <button ng-click="showHide()">Boom</button>
</div>



function TodoCtrl($scope) {
    $scope.show = true;
    $scope.showHide = function(){
      $scope.show = !$scope.show
    }
}

fiddle

Разница между ngShow/ngHide & ngIf - ng-if приведет к удалению элементов из DOM. Это означает, что все ваши обработчики или что-либо еще, прикрепленное к этим элементам, будут потеряны. ng-show/ng-hide не удаляет элементы из DOM. Он использует стили CSS, чтобы скрыть/показать элементы, а также ng-if создает дочернюю область, в то время как ng-show/ng-hide не

благодаря

Разве ты не хочешь объяснить разницу? Или показать код, который работает для ОП?