Question

我最近在一段时间之后回到了一个角度项目，我（再一次）在理解角度语法方面遇到了一些麻烦。

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

这是'directionComponent'模块的代码，正在通过html中的eng-direction正确添加。

<script>
            var app = angular.module('myApp', []);
            app.controller('myCtrl', function($scope, $http) {
              $http.get("http://192.16.1:8080/restproj/v1/dealer/1234/car")
              .then(function(response) {
                  $scope.myMessage = response.data;

              });
            });
        </script>

通过ng-click按预期触发console.log消息，但我对如何触发页面更改几乎一无所知。我需要在某处包含$ routeParams或$ routeProvider吗？

我已经搜索过，但似乎无法找到与我正在尝试的内容相符的答案，而且我不知道我需要在我找到的解决方案中进行哪些更改才能使其在我的工作中发挥作用案件。如果有人有任何指示，那将非常感激。

Answer 1

您需要注入MultiMap服务：

$location

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

function

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 而非angular会请求 test.html 并将该页面加载到 ng-view 。此外，您可以具体说明哪个控制器将与模板一起使用。

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

<强>更新例如，您有此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.

所以，如果你用addess

开始你的网络clinet

<强> http://localhost:3000/

在ng-view中没有内容，因为你没有为root目录定义 $ routeProvider.when（'/'）。但是，当您单击 test1 链接时，angular将向服务器询问 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>

Angular 1.2：从指令触发页面更改

2 个答案: