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

Question

我正在使用 angular.js。我的导航栏有一个 Controller ，如下所示。

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

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

这将给我所有已创建的类(class)。我像这样把它放在导航栏上:

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

这在我加载页面时有效。但是，我有一个创建新类(class)的表格，它也有效。但是，在成功提交之后，导航栏将不包含该类，直到我完全重新加载页面。这是我的 Controller ，它创建了一个新类(class)。

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
            });
        }
    }
]);

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

Answer 1

您可以使用 $broadcast 发送一条消息，指出导航需要更新，并使用 $on 来监听该事件。请参阅:https://docs.angularjs.org/api/ng/type/ $rootScope.作用域

也许是这样的:

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');
        });
    }
}]);