如何在成功提交表单后重新加载导航栏

How do I reload my navbar upon a successful form submission?

本文关键字：加载 导航 新加载 成功 提交 表单      更新时间：2023-09-26

我使用angular.js。我的导航栏有一个控制器，如下所示。

var controllers = angular.module('controllers', []);
controllers.controller('NavbarController', ['$scope', '$http',
    function ($scope, $http) {
        $http.get('/api/courses')
        .success(function(data) {
            $scope.courses = data.objects;
        });
    }
]);

这将给我所有已经创建的课程。我把它放在导航栏上，就像这样：

<ul class="dropdown-menu">
  <li  ng-repeat="course in courses">
    <a href="#/course/course_id/{{ course.id }}">{{ course.name }}</a>
  </li>
</ul>

这在我加载页面时有效。然而，我有一个表格来创建一个新的课程，这也是有效的。然而，在成功提交后，导航栏将不会包含该类，直到我完全重新加载页面。这是我的控制器，它创建了一个新的课程。

controllers.controller('CreateCourseController', ['$scope', '$http',
    function($scope, $http) {
        $scope.form_data = {};
        $scope.submitForm = function() {
            $http.post('/api/courses', $scope.form_data).
            success(function(data) {
              // here, I want to add this item into the navbar selection somehow
            });
        }
    }
]);

在angular中，将这个新添加的类干净地添加到导航栏中的最佳方式是什么？

您可以使用$broadcast发送需要更新导航的消息，并使用$on侦听事件。请参阅：https://docs.angularjs.org/api/ng/type/$rootScope.Scope

也许是这样的：

var controllers = angular.module('controllers', []);
controllers.controller('NavbarController', ['$scope', '$http',
function ($scope, $http) {
    var updateNav = function() {
        $http.get('/api/courses')
            .success(function(data) {
                $scope.courses = data.objects;
            });
    };
    // Init
    updateNav();
    // Subscribe
    $scope.$on('nav:updated', updateNav() );
}]);
controllers.controller('CreateCourseController', ['$scope', '$http',
function($scope, $http) {
    $scope.form_data = {};
    $scope.submitForm = function() {
        $http.post('/api/courses', $scope.form_data).
        success(function(data) {
            // here, I want to add this item into the navbar selection somehow
            $scope.$broadcast('nav:updated');
        });
    }
}]);
相关文章：