Question

我有一个由ng-reapet组成的标签结构，它显示了一个面板中每个标签的内容（相同但是差异内容）。我添加了

<div ng-controller="myCtrl">
    <div ng-include="'tpl.html'">
    </div>
</div>

在每个选项卡面板中显示根据所选选项卡的内容及其罚款，但是当我点击html中的提交时（在填写字段之后），我希望将ng-include替换为另一个html（提交结果）模板和他的控制器。

现在我正在做$state.go("url")并将它带到另一页并使用路线刷新页面。

Answer 1

试试这个，

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body>
  <div ng-controller="switchCtrl">
  <input type='button' ng-value='buttonText' ng-click="doEdit()" />
    <div ng-include="template.url"></div>
  </div>
</body>

</html>

Controller.js

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

app.controller('switchCtrl', function($scope) {

  $scope.templates = [{
    name: 'template-one.html',
    url: 'template-one.html'
  }, {
    name: 'template-two.html',
    url: 'template-two.html'
  }];

  $scope.hasPermissionToEdit = true;
  $scope.buttonText = 'Edit';
  $scope.isEditing = false;
  $scope.shared = 'shared value between templates.';
  $scope.template = $scope.templates[0];

  $scope.doEdit = function() {
    if ($scope.isEditing) {
      $scope.template = $scope.templates[0];
      $scope.isEditing = false;
      $scope.buttonText = 'Edit';
    } else {
      if ($scope.hasPermissionToEdit) {
        $scope.template = $scope.templates[1];
        $scope.isEditing = true;
        $scope.buttonText = 'Go back';
      } else {
        alert('you don\'t have permission to edit');
      }
    }
  }
});

希望这有帮助!!

使用控制器更改ng-include

1 个答案: