Javascript 角度1.2：从指令触发页面更改

经过一段时间之后，我最近又回到了一个角度项目，我（再次）在理解角度语法方面遇到了一些困难

我只想添加一个按钮链接。

下面是“directionComponent”模块的代码，它是通过html中的eng方向正确添加的

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消息通过ng click按预期触发，但我对如何触发页面更改知之甚少。我是否需要在某处包含$routeParams或$routeProvider

我已经搜索过了，但似乎找不到一个与我正在尝试做的事情相吻合的答案，我也不知道我需要对我找到的解决方案进行哪些更改，以使其在我的案例中发挥作用。

---

如果有人有任何建议，我们将不胜感激。

您需要注入

$location

服务：

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

然后在

函数中

：

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

---

您需要注入

$location

服务：

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

然后在

函数中

：

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

我建议使用“ngRoute”模块重定向到不同的页面。
如果按钮重定向到/test，angular将请求test.html，并将该页面加载到ng视图中。此外，您还可以指定哪个控制器将与模板一起使用

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

更新 例如，您有这个HTML页面

test1.html

所以，如果你用addess开始你的网络clinet

ng视图中将没有内容，因为您没有为根目录定义$routeProvider.when（'/'）。 然而，当您单击test1链接时，angular将向服务器请求test1.html，并将该页面加载到ng视图下

它看起来会像这样

doctype html
html
头
...
正文（ng app=“myApp”ng controller=“MainCtrl as main”）
a（href=“/test1”）test1
a（href=“/test2”）test2
分区（ng视图）
TEST1{{test}

我建议使用“ngRoute”模块重定向到不同的页面。
如果按钮重定向到/test，angular将请求test.html，并将该页面加载到ng视图中。此外，您还可以指定哪个控制器将与模板一起使用

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

更新 例如，您有这个HTML页面

test1.html

所以，如果你用addess开始你的网络clinet

ng视图中将没有内容，因为您没有为根目录定义$routeProvider.when（'/'）。 然而，当您单击test1链接时，angular将向服务器请求test1.html，并将该页面加载到ng视图下

它看起来会像这样

doctype html
html
头
...
正文（ng app=“myApp”ng controller=“MainCtrl as main”）
a（href=“/test1”）test1
a（href=“/test2”）test2
分区（ng视图）
TEST1{{test}

您使用哪个库进行路由：ui router或ngRoute我们正在使用ngRoute。那么，您想更改url吗？使用

$location.path（'/new/path/url'）

而不是控制台。logYes，我想路由到其他页面；有效地，添加指向directionComponent按钮的链接。您使用哪个库进行路由：ui router或ngRoute我们正在使用ngRoute。那么，您想更改url吗？使用

$location.path（'/new/path/url'）

而不是console.logYes，我想路由到其他页面；有效地，添加指向directionComponent按钮的链接。谢谢您的回答。您确定此语法正确吗？用我的函数内容代替了你的“…”，我得到一个错误，说“]”是应该的，但在最后一个结束括号之前有一个。这里可能缺少一个逗号吗？是的。看起来在“$location”和函数之间需要一个逗号。好的，这是有效的（！），但我传递newPageID的格式似乎是错误的。目前它只是页面的id。我想它需要完整的路径。我会试一试的。谢谢你的回答。您确定此语法正确吗？用我的函数内容代替了你的“…”，我得到一个错误，说“]”是应该的，但在最后一个结束括号之前有一个。这里可能缺少一个逗号吗？是的。看起来在“$location”和函数之间需要一个逗号。好的，这是有效的（！），但我传递newPageID的格式似乎是错误的。目前它只是页面的id。我想它需要完整的路径。很抱歉，这里没有足够的信息让我理解答案。我在这里没有看到任何涉及方向组件的内容。“我想你一定是间接地引用了它，但我不明白怎么回事。”moosefetcher抱歉，没有足够的信息。我将编辑它将提供更多信息。我现在将编辑。感谢您花时间更新您的答案。我们已经在app.js中使用了ngRoute路由——我只是不知道如何从不同文件中的指令内部创建链接；所以我把另一个答案标记为正确。再次感谢。对不起，这里没有足够的信息让我理解答案。我在这里没有看到任何涉及方向组件的内容。“我想你一定是间接地引用了它，但我不明白怎么回事。”moosefetcher抱歉，没有足够的信息。我将编辑它将提供更多信息。我现在将编辑。感谢您花时间更新您的答案。我们已经在app.js中使用了ngRoute路由——我只是不知道如何从不同文件中的指令内部创建链接；所以我把另一个答案标记为正确。再次感谢。

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.

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>