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

Question

当视图更改时，它会替换 ng-view 中的先前视图。但它没有改变。它显示模板数据 "context".

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";
       
    };

});

<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>

当我点击 "context" 时，它应该会显示其他页面数据，例如 "My Name is Awais Saleem"，然后我点击 "My name is..."，然后它会显示 "Context"。基本上我想替换以前的视图。

Answer 1

它不起作用的原因是因为 $scope.url 只能在其控制器中识别，并且由于 HTML 页面中没有任何控制器，它不知道那是什么意思是

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

Answer 2

定义的控制器只能在 <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>

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

Replacing View using ng-view in angularjs

javascript

angularjs

routing

ng-view