AngularJS 在控制器中共享 function/common 代码

Question

我有一个要在我的控制器中使用的子程序。在处理数据的情况下，新记录空白字段，屏幕清除，在其他一些过程之后，我想清除视图上的可编辑字段。

控制器：

angular.module('MyApp').controller('Ctrl', ["$scope", "ServiceData",
    function ($scope, ServiceData) {

        function ClearMemberStruture()
        {
            $scope.member.Key = "";
            $scope.member.Name = "";
            $scope.member.Points = 0;
            $scope.EditMode = false;
        }

        $scope.Members = ServiceData.GetAllMembers();
        $scope.member = {};
        ClearMemberStruture();

        $scope.DeleteMember = function(Member) {
            ServiceData.DeleteMember(Member.Key);
            $scopeEditMode = false;
        };

        $scope.EditMember = function(Member) {
            var EditMember = ServiceData.GetOneMember(Member.Key);
            EditMember.$bindTo($scope, "member").then(
                function(unbind) {
                    $scope.MemberUnbind = unbind;
                });
            $scopeEditMode = true;
        };

        $scope.SaveMember = function(Member) {
            if( ! $scopeEditMode )
            {
                $scope.member = ServiceData.AddMember(Member);
                ClearMemberStructure();
            }
        };

        $scope.ClearMember = function() {
            $scope.member.unbind;
            ClearMemberStructure();
            $scope.MemberUnbind();
        };
    }
]);

ClearMemberStructure() 用于重置公共结构字段和控制在屏幕上显示信息的编辑标志。当我运行这段代码时，我总是得到一个

ReferenceError: ClearMemberStructure is not defined

如何在 AngularJS 的控制器中共享此常用功能？

如果我添加一个工厂，我可以使用对工厂的调用来实现：

angular.module('MyApp').factory("MemberRecord", function() {
        var Member = {
            Key: "",
            Name: "",
            Points: ""
            };

        return {
            Clear: function() {
                Member.Key = "";
                Member.Name = "";
                Member.Points = "";
                return Member;
            }
        };
    }
);

然后在控制器中：

    $scope.member = MemberRecord.Clear();

有没有办法进行简单函数样式的代码共享，因为我确实希望将其作为私有函数处理，但无法让它识别控制器中的函数。

Answer 1

我更喜欢为成员使用工厂并在那里封装方法。但您可以尝试更简单的方法：

angular.module('MyApp').controller('Ctrl', ["$scope", "ServiceData",
    function ($scope, ServiceData) {
        var that = this;
        that.ClearMemberStruture = function()
        {
            $scope.member.Key = "";
            $scope.member.Name = "";
            $scope.member.Points = 0;
            $scope.EditMode = false;
        }

        $scope.Members = ServiceData.GetAllMembers();
        $scope.member = {};
        that.ClearMemberStruture();

        $scope.DeleteMember = function(Member) {
            ServiceData.DeleteMember(Member.Key);
            $scopeEditMode = false;
        };

        $scope.EditMember = function(Member) {
            var EditMember = ServiceData.GetOneMember(Member.Key);
            EditMember.$bindTo($scope, "member").then(
                function(unbind) {
                    $scope.MemberUnbind = unbind;
                });
            $scopeEditMode = true;
        };

        $scope.SaveMember = function(Member) {
            if( ! $scopeEditMode )
            {
                $scope.member = ServiceData.AddMember(Member);
                ClearMemberStructure();
            }
        };

        $scope.ClearMember = function() {
            $scope.member.unbind;
            ClearMemberStructure();
            $scope.MemberUnbind();
        };
    }
]);

Answer 2

我使用工厂的单独文件在控制器之间共享代码。

App.factory('CommonServices', function ($http) {


    return { 
      createComment: function($api_key, $post_id, $comment) {
        var comment_data = {
          content: $comment
        };
        return $http({
          url: '/api/v1/posts/' + $post_id + '/comments',
          method: "POST",
          headers: { 'X-API-TOKEN': $api_key },
          params: comment_data,
          data: ''
        })
      }
    });

然后在控制器中，您可以访问以下常用功能：

$scope.saveComment = function($post_id) {
   CommonServices.createComment($scope.api_key, $post_id, $scope.comment.text)
   .then(function(_data) {
     var index = $scope.feed_items.filter(function (post) { return post.id == $post_id });
     index[0].comments.unshift(_data.data);
     $scope.showComment = false;
   });
 }

Answer 3

   var ClearMemberStruture = function()
    {
        $scope.member.Key = "";
        $scope.member.Name = "";
        $scope.member.Points = 0;
        $scope.EditMode = false;
    }

是您在不破坏整个代码的情况下声明 ClearMemberStruture 的解决方案。

AngularJS 在控制器中共享 function/common 代码

AngularJS share function/common code in a controller

javascript

angularjs

firebase