Question

当视图更改时，它将替换ng-view中的上一个视图。但它没有改变。它显示的模板数据是＆＃34; context＆＃34;。

＆＃13;

var app = angular.module("myapp", ["ngRoute"]);

app.service('datapass', function () {

    this.name = "name";

});

app.config(function ($routeProvider) {

    $routeProvider
    .when("/name", {

        template: 'Context',
        controller: 'front_controller'
    })
    .when("/detail", {
        template: 'My Name is Awais Saleem',
        controller: 'main_controller'
    })
    .otherwise("/name");

});

app.controller("front_controller", function ($scope, datapass,$location) {
    $scope.url = datapass.name;
    $scope.changeView = function () {

        $scope.url = datapass.name = (datapass.name == "name") ? "detail" : "name";
      
    };

});

app.controller("main_controller", function ($scope, datapass,$location) {
    $scope.url = datapass.name;
  
    $scope.changeView = function () {

        $scope.url = datapass.name = (datapass.name == "name") ? "detail" : "name";
       
    };

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

<body ng-app="myapp">

    <a ng-click="changeView()" href="#!{{url}}">
        <div ng-view></div>
    </a>
 
</body>

＆＃13;

当我点击＆＃34;上下文＆＃34;然后它应该显示其他页面数据，例如＆＃34;我的名字是Awais Saleem＆＃34;然后我点击＆＃34;我的名字是......＆＃34;然后它显示＆＃34; Context＆＃34;。基本上我想替换以前的观点。

Answer 1

定义的控制器只能在<div ng-view></div>元素中访问，但是，您尝试在父标记（<a>）中使用它。因此，父标记中无法识别控制器及其功能。因此，此处<a>标记应位于模板内。

另外，使用href更好的方法是使用$location.path()，而不是使用var app = angular.module("myapp", ["ngRoute"]); app.service('datapass', function() { this.name = "name"; }); app.config(function($routeProvider) { $routeProvider .when("/name", { template: '<a ng-click="changeView()" href="">Context</a>', controller: 'front_controller' }) .when("/detail", { template: '<a ng-click = "changeView()" href="">My Name is Awais Saleem</a>', controller: 'main_controller' }) .otherwise("/name"); }); app.controller("front_controller", function($scope, datapass, $location) { $scope.changeView = function() { datapass.name = (datapass.name == "name") ? "detail" : "name"; $location.path("/"+datapass.name); }; }); app.controller("main_controller", function($scope, datapass, $location) { $scope.changeView = function() { datapass.name = (datapass.name == "name") ? "detail" :"name"; $location.path("/"+datapass.name); }; });。

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

<body ng-app="myapp">

  
    <div ng-view></div>
  

</body>

<!DOCTYPE HTML>
<html>
    <head>
        <title>Personal Portfolio</title>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
            <script src="/js/my.js"></script>
            <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
            <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
    </head>
    <body data-spy="scroll" data-target=".navbar" data-offset="100">
        <!- Navbar-->
        <nav class="navbar navbar-toggleable-sm navbar-light" style="background-color:purple;">
            <button class="navbar-toggler navbar-toggler-right my-sm-0" type="button" data-toggle="collapse" data-target="#mainNav" aria-controls="mainNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <a class="navber-brand" href="#">
                <img src="qlip.png" style="height:60px;">
            </a>
            <div class="collapse navbar-collapse" id="mainNav">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link" href="#">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Portfolio</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">Contact</a>
                    </li>
                </ul>
            </div>
        </nav>
    </body>
</html>

Answer 2

它不起作用的原因是因为$scope.url仅在其控制器中被识别，并且由于您在HTML页面中没有任何控制器，因此它不知道这意味着什么。

快速而肮脏的解决方案是将其添加到$rootScope，但更好的解决方案是使用控制器添加父状态，然后所有状态也将具有该功能。

使用angularjs中的ng-view替换视图

2 个答案: