ng-include после загрузки приложения

Question

ng-include после загрузки приложения

0

В настоящее время у меня есть сервер, использующий дескрипторы для создания начальной HTML-страницы. На этой странице я хочу, чтобы ng-include обновлял страницу на клиенте.

Однако, когда мое приложение запускается, оно загружает страницу, поэтому data-ng-include="template.url" загружает template.url, как обычно. Есть ли в любом случае для ng-include для загрузки этих данных после загрузки приложения?

Вот плункер. Посмотрите на код внутри index.html!

Karl Morrison 05 окт. 2015, в 04:23

Источник

0

то, что вы ищете, может быть сделано с помощью маршрутизатора или, более конкретно, конечного автомата. Angular включает в себя пакет маршрутизатора, а также отличный пакет ui-router, который является конечным автоматом github.com/angular-ui/ui-router . любой из них будет работать, но многие считают, что UI-маршрутизатор превосходит угловой маршрутизатор по умолчанию.
Claies 05 окт. 2015, в 02:14
0

@Claies Посмотрим и свяжемся с вами!
Karl Morrison 05 окт. 2015, в 02:20
0

лично я не люблю ng-include, то, что я сделал бы, это построил бы директиву и либо использовал предложенный ng-if ответ (так что директива отображается при условии), либо просто обновил переменную в директиве и затем запустил $ compile в шаблоне или что-то, чтобы сделать директиву и привязать ее к области видимости
Jony-Y 05 окт. 2015, в 03:09

Показать ещё 1 комментарий

Теги:

javascript

angularjs

2 ответа

Ещё вопросы

то, что вы ищете, может быть сделано с помощью маршрутизатора или, более конкретно, конечного автомата. Angular включает в себя пакет маршрутизатора, а также отличный пакет ui-router, который является конечным автоматом github.com/angular-ui/ui-router . любой из них будет работать, но многие считают, что UI-маршрутизатор превосходит угловой маршрутизатор по умолчанию.
лично я не люблю ng-include, то, что я сделал бы, это построил бы директиву и либо использовал предложенный ng-if ответ (так что директива отображается при условии), либо просто обновил переменную в директиве и затем запустил $ compile в шаблоне или что-то, чтобы сделать директиву и привязать ее к области видимости

nur farazi · Answer 1 · 2015-10-05T00-50-00.000Z

вы можете использовать

ng-if директива

просто проверьте его первоначальную загрузку, это сделает вашу жизнь легкой

<ANY ng-if="expression">

 //your code goes here

</ANY>

такие как

<ANY ng-if="false">

// code will not execute 

</ANY>

Я надеюсь, что это поможет вам

на ваш код

<body>
<div data-ng-controller="ctrl">
  <div data-ng-include="template.url" ng-if="false">

    Here is some stuff that I wish to remain until I press the button below.
  </div>
  <button type="button" data-ng-click="second()">Press me!</button>
</div>

основанный на вашем ответе, вы должны использовать свое условие в вашем.js файле здесь, это ваш модифицированный код

 angular.module('myApp', [])
  .controller('ctrl', ['$scope', function ($scope) {

$scope.templates =
  [ { name: 'first.html', url: 'first.html'},
    { name: 'second.html', url: 'second.html'} ];

    if (false){
      $scope.template = $scope.templates[0];
    }


$scope.second = function () {
  $scope.template = $scope.templates[1];
};

$scope.first = function () {
  $scope.template = $scope.templates[0];
};

 }]);

Интересно, это будет работать. К сожалению, он также отключает остальную часть кода!
ты пытался так ?? проверьте ответ еще раз
Ааа хаха подлый подлый! Я , к сожалению, логика внутри ng-include DIV , хотя (по моей заявке, plunker был упрощенный пример) :(
тогда вы должны установить условие в вашем файле .js, а не здесь, для меньшей сложности
Проверьте ответ сейчас, вы видели проверку при первой загрузке?
Однако кнопка должна быть внутри ng-include (и функционировать ofc)!
Давайте продолжим эту дискуссию в чате .

Husni Firmansyah · Answer 2 · 2015-10-05T03-32-00.000Z

Кроме того, вы можете использовать $ location для своего случая, но для того, чтобы больше не редактировать его, я могу предоставить вам это решение:

Удалите код внутри файла index.html, чтобы ваш код выглядел следующим образом:

<!DOCTYPE html>
<html ng-app="myApp">
<head>
   <script data-require="[email protected]" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
   <script src="script.js"></script>
</head>
<body>
   <div data-ng-controller="ctrl">
      <div data-ng-include="template.url"></div>
   </div>
</body>
</html>

2. Замените свой скрипт.js следующим образом:

angular.module('myApp', [])
.controller('ctrl', ['$scope', function ($scope) {

$scope.templates =
  [ { name: 'init.html', url: 'init.html'},
    { name: 'first.html', url: 'first.html'},
    { name: 'second.html', url: 'second.html'} ];
$scope.template = $scope.templates[0];

$scope.second = function () {
  $scope.template = $scope.templates[2];
};

$scope.first = function () {
  $scope.template = $scope.templates[1];
};
}]);

3.Создайте файл init.html с кодом внутри:

 Here is some stuff that I wish to remain until I press the button below.
 <button type="button" data-ng-click="second()">Press me!</button>

Запустить его.