javascript - 两个不同 View 上的两个按钮调用相同的函数，angularjs

Question

我有一个 SPA，有两种不同的观点，一种针对学科，另一种针对学生，在主题 View 中，我在 app/views/subject/subject.html 中有一个保存按钮:

    <button type="button" class="btn btn-warning" ng-click="saveInfo()">
            Save
    </button>

我想在学生 View 中添加相同的功能，saveInfo() 将数据传递到应用程序工厂中的服务中，该服务通过 fill_table.php 将数据保存在数据库中。app/javascript/services.js 中的应用程序工厂:

    var app = angular.module('myApp');

app.factory("services", ['$http', function($http) {
var serviceBase = 'http://localhost/php/';
var obj = {};
document.title = "myApp on " + serviceBase;
obj.postData = function (user, data) {

return $http.post(serviceBase + 'fill_table.php', { "data": data, "user": {'username': user.name, 'password': user.password }).then(function (results) {
        return results.data;
    });
};

saveInfo() 位于 app/views/subject/subject.js 中:

    $scope.saveInfo = function() {
    console.log("saveInfo");
    $scope.loadingInstance = $modal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'modalLoading.html',
      size: "l",
    });

    return getChanges( $indexedDB, $q).then( function(responsesArray) {
        var jsonData = {};
        $scope.errorInstance = undefined;
        for (var i=0; i < DB_TABLES.length; i++) {
            var table = DB_TABLES[i];
            var items = responsesArray[i]
            if (items.length > 0){
                jsonData[table] = items;
            }
        }
        console.log(JSON.stringify(jsonData));
        return services.postData($scope.selectedUser, jsonData);


    })
   }

我想将提到的按钮添加到app/views/student/student.html中。我尝试将代码从 subject.js 复制到 Student 中，但由于某种原因，即使我检查一切都正确，它也不起作用，所以有没有办法只将该函数从 subject.js 复制到 Student.html

注释 1 getChanges() 是另一个函数，获取插入的信息并将其传递给 saveinfo()。

注释 2 现在，我可以通过按主题 View 中的保存按钮来保存插入学生 View 的信息

Answer 1

如果我理解正确的话，你有两个 html 文件和两个 Controller (学生和主题)。要在它们之间共享数据/功能，您可以使用服务或工厂来处理所有 http 请求。这是可重复使用的，并且可以从您的所有 Controller 访问。

app.factory("services", ['$http', function($http) {

   var postStudent = function (student) {
        return $http.post("api/Student/Post", student);
   };

   var getChanges = function (){
       return $http.get("api/Student/Changes", student);
   };

   return {
       postStudent : postStudent, 
       getChanges : getChanges 
   };
}])

现在您可以根据需要从 Controller 调用服务。

app.controller('StudentController', ['service', function(service){
  service.postStudent(student).then(function successCallback(response) {
      console.log('success');

  }, function errorCallback(response) {
      console.log('error ' + response);

  });

  service.getChanges().then(function successCallback(response) {
      console.log('success');

  }, function errorCallback(response) {
      console.log('error ' + response);

  });
}]);


app.controller('SubjectController', ['service', function(service){
  service.postStudent(student).then(functionsuccessCallback(response){    
      }, 
      function errorCallback(response) {    
      });

  service.getChanges().then(function successCallback(response) {
      }, 
      function errorCallback(response) {
      });
  }]);

请注意，上述内容尚未实现，但应该为您提供一个轮廓。