如何将该模块中的AngularJS控制器转换为另一种格式

How to convert this AngularJS controller in this module to another format?

本文关键字：转换 控制器 另一种 格式 AngularJS 模块      更新时间：2023-09-26

我有这个AngularJS控制器;

angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
  $scope.tabs = [
    { title:"Dynamic Title 1", content:"Dynamic content 1" },
    { title:"Dynamic Title 2", content:"Dynamic content 2", disabled: true }
  ];
  $scope.alertMe = function() {
    setTimeout(function() {
      alert("You've selected the alert tab!");
    });
  };
  $scope.navType = 'pills';
};

我想把它转换成另一个控制器(从AngularJS种子)，格式如下;

angular.module('myApp.controllers', []).
  controller('MyCtrl1', [function() {
  }])
  .controller('MyCtrl2', [function() {
  }]);

index.html是这样的;

<div ng-controller="TabsDemoCtrl">
  <p>Select a tab by setting active binding to true:</p>
  <p>
    <button class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button>
    <button class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button>
  </p>
  <p>
    <button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
  </p>
  <hr />

转换后的控制器应该是什么样子?

我尝试了以下操作，但是没有成功。

angular.module('myApp.controllers', []).
  controller('TabsDemoCtrl', [function() {
    $scope.tabs = [
      { title:"Dynamic Title 1", content:"Dynamic content 1" },
      { title:"Dynamic Title 2", content:"Dynamic content 2", disabled: true }
    ];
    $scope.alertMe = function() {
      setTimeout(function() {
        alert("You've selected the alert tab!");
      });
    };
    $scope.navType = 'pills';    
    }])
  .controller('MyCtrl2', [function() {
  }]);

我做错了什么?

你必须将$scope注入控制器才能使其工作

angular.module('myApp.controllers', []).
  controller('TabsDemoCtrl', ['$scope', function($scope) {
    $scope.tabs = [
      { title:"Dynamic Title 1", content:"Dynamic content 1" },
      { title:"Dynamic Title 2", content:"Dynamic content 2", disabled: true }
    ];
    $scope.alertMe = function() {
      setTimeout(function() {
        alert("You've selected the alert tab!");
      });
    };
    $scope.navType = 'pills';    
    }]);

您可能希望在第二行指定$scope。所以你的代码应该是

angular.module('myApp.controllers', []).
controller('TabsDemoCtrl', ['$scope', function() {
    $scope.tabs = [
      { title:"Dynamic Title 1", content:"Dynamic content 1" },
      { title:"Dynamic Title 2", content:"Dynamic content 2", disabled: true }
    ];
....

同时，确保你的myApp。Controllers已经注册。

相关文章：