Угловая 1.2: Изменение страницы с триггера из директивы

Question

Я уже некоторое время возвращаюсь к угловому проекту, и я (еще раз) испытываю некоторые проблемы с пониманием углового синтаксиса.

Я бы просто хотел добавить ссылку на кнопку.

Вот код для модуля 'directionComponent', который добавляется правильно, через eng-direction в html.

var app = angular.module("directionComponent", []);  

app.directive('engDirection', function(completions) { 
    return {   
     restrict: 'A', 
     replace: true, 
     templateUrl: 'components/direction.html', 
     link: function(scope, element, attrs) { 
      scope.changePage = function (newPageID) { 
       console.log("page should change to "+newPageID); 
      } 
     } 

    }; 
}); 

console.log сообщения сработало, как ожидается, через нг-клик, но у меня очень мало представления о том, как вызвать изменения страницы. Нужно ли включать где-то $ routeParams или $ routeProvider?

Я искал, но не могу найти ответ, который мешает тому, что я пытаюсь сделать, и я не знаю, что мне нужно изменить в решениях, которые я нашел, чтобы заставить его работать мое дело. Если у кого-то есть указатели, это было бы очень признательно.

Answer 1

Вам нужно впрыскивать $location услуги:

app.directive('engDirection', ['$location', function($location) { ... }]); 

, а затем в вашем function:

scope.changePage = function (newPageID) { 
    $location.path(newPageID); 
} 

Answer 2

var app = angular.module('myApp',['ngRoute']); 
app.config(function($routeProvider)){ 
    $routeProvider 
     .when('/test1', { templateUrl: 'test1.html', controller: 'MainCtrl'}); 
     .when('/test2', { templateUrl: 'test2.html', controller: 'MainCtrl'}); 
} 

Я предлагаю использовать модуль 'ngRoute' для перенаправления на другую страницу.
если ваша кнопка перенаправлять /тест чем угловой запросит test.html и загрузить страницу в нг ракурса. Кроме того, вы можете указать, какой контроллер будет использоваться с шаблоном.

div(class="container-fluid") 
     div(ng-view) 
      //Here, test.html will be loaded. 

UPDATE Например, у вас есть этот HTML-страницу.

test1.html

<div> 
    <p>TEST1 {{ test }} </p> 
</div> 

test2.html

<div> 
    <p>TEST2 {{ test }} </p> 
</div> 

index.pug или index.jade или index.html

doctype html 
html 
    head 
     ... 
    body(ng-app="myApp" ng-controller="MainCtrl as main") 
     a(href="/test1") test1 
     a(href="/test2") test2 
     div(ng-view) 
      //Here, test.html will be loaded. 

Итак, если вы начинаете свой веб clinet с addess

http://localhost:3000/

не будет никакого содержания в нг-зрения, потому что вы не определили $ routeProvider.when ('/') для корневого каталога. Однако, когда вы нажимаете test1 link, угловой спросите test1.html на сервер и загрузить эту страницу до ng-view.

Это будет выглядеть следующим образом для

http://localhost:3000/test1

doctype html 
html 
    head 
     ... 
    body(ng-app="myApp" ng-controller="MainCtrl as main") 
     a(href="/test1") test1 
     a(href="/test2") test2 
     div(ng-view) 
      <div> 
       <p>TEST1 {{ test }} </p> 
      </div>