Question

单击按钮我想要使用相同的模型值更改模板。我正在使用location.path来更改模板。

Plunk- http://plnkr.co/edit/FVkSj2vs8WDAt1eifBpF?p=preview

app.js

var app = angular.module('includeExample', ['ngRoute']);

   app.config(function($routeProvider) {
        $routeProvider

            // route for the about page
            .when('/template2', {
                templateUrl : 'template2.html',
                controller  : 'ExampleController'
            })


    });

app.controller('mainController', [function($scope) {


}]);

  app.controller('ExampleController', [function($location, $scope) {

    $scope.locationChange = function(){
      $location.path('/template2');

    }

  }]);

template1.html

Content of template1.html
<br/>
<input ng-model="x"/>
<button ng-click='locationChange()'> Submit</button>
{{x}}

Answer 1

考虑使用ngSwitch指令。您可以像这样使用它：

<div ng-switch="location">
  <div ng-switch-when="template1">
    <div ng-include="'template1.html'"></div>
  </div>
  <div ng-switch-when="template2">
    <div ng-include="'template1.html'"></div>
  </div>
</div>

然后在单击按钮时保持scope.location（将其设置为template1或template2）。

Answer 2

创建一个缓存$ scope的服务。

.factory('appData', [function() {
  var cache = {};
  return {
    set: function(location, payload) {
      cache[location] = payload;
    },
    get: function(location) {
      return cache[location];
    },
    clear: function() {
      cache = {};
    }
  };
});

然后在您的controller /指令中，只需将appData作为依赖项包含并调用

appData.set('cacheScope', $scope);

并检索它：

$scope = appData.get('cacheScope');

在location.path（）之后使范围值相同

2 个答案: