Question

我有以下模块：

(function(){

var app = angular.module('ModBrowser',['ModUserCredentials','ModContentGroup']);

app.directive('browser', function(){
    return {
        restrict: "E",
        templateUrl: "angular_js/Browser/Browser.html",
        controller: BrowserController,
        controllerAs: 'ctrlBrowser'
    }
});

function BrowserController($http, $rootScope, UserCredentials){
    var self = this;

    self.active = false;

    self.folders = [];
    self.files = [];
    self.models = [];

    self.Init = function(){
        self.active = true;

        var url = "curl.php";
        var data = {
            path: "ViewFiles",
            parent_id: "{\"user_id\":\"" + UserCredentials.ID + "\",\"parent_id\":\"" + $rootScope.selectedFolder + "\"}"
        };

        $http.post(url, data).then(function(response){
            for(var i=0; i < response.data.length; i++){
                if(response.data[i].object_type.trim() == "FOLDER"){
                    self.folders.push(response.data[i]);
                }else if(response.data[i].object_type.trim() == "MODEL"){
                    self.models.push(response.data[i]);
                }else {
                    self.files.push(response.data[i]);
                }
            }

            console.log(self.folders);
            console.log(self.models);
            console.log(self.files);
        });

    }

    $rootScope.$watch('selectedFolder',function(){
        if($rootScope.selectedFolder !== undefined){
            self.Init();
        }
    });

}})();

这个模块的作用是列出特定文件夹的内容。现在每次我选择一个文件夹时，观察者都会监听并激活init函数

    $rootScope.$watch('selectedFolder',function(){
        if($rootScope.selectedFolder !== undefined){
            self.Init();
        }
    });

Init函数只是从服务器检索文件并对文件进行分组。

            for(var i=0; i < response.data.length; i++){
                if(response.data[i].object_type.trim() == "FOLDER"){
                    self.folders.push(response.data[i]);
                }else if(response.data[i].object_type.trim() == "MODEL"){
                    self.models.push(response.data[i]);
                }else {
                    self.files.push(response.data[i]);
                }
            }

            console.log(self.folders);
            console.log(self.models);
            console.log(self.files);

一切正常，我会将值传递给另一个指令。

<div class="panel panel-default" ng-show="ctrlBrowser.active">
<div class="panel-heading">&nbsp;</div>
<div class="panel-content">
    <content-group items="ctrlBrowser.folders">Folders</content-group>
    <content-group items="ctrlBrowser.files">Files</content-group>
    <content-group items="ctrlBrowser.models">Special Files</content-group>
</div>

并显示如下。

Folders
  - Folder 1
  - Folder 2
Files
  - File 1
  - File 2
Models 
  - Model 1

但是当我选择另一个文件夹时，由于它只是推送到现有的数组，它也会显示以前的文件。

Folders
  - Folder 1 (old)
  - Folder 2 (old)
  - Folder 3 (new)
  - Folder 4 (new)
Files
  - File 1 (old)
  - File 2 (old)
Models 
  - Model 1 (old)

现在我尝试通过在每次调用Init函数时将文件夹，文件和模型数组设置为[]来解决此问题。

  self.Init = function(){
        self.active = true;

        //----- Additional Code ------//

        self.folders = [];
        self.files = [];
        self.models = [];

        //----- End of Additional Code ------//


        var url = "curl.php";
        var data = {
            path: "ViewFiles",
            parent_id: "{\"user_id\":\"" + UserCredentials.ID + "\",\"parent_id\":\"" + $rootScope.selectedFolder + "\"}"
        };

        //---- Unchanged Codes ----//
  }

这仍然会记录检索到的项目，但不会呈现任何内容并给我这个。

Folders

Files

Models

我做错了什么？在这种情况下代码如何流动？

它很长，我试图尽可能具体。谢谢。

Answer 1

我找到了问题的答案。

而不是：

    self.folders = [];
    self.files = [];
    self.models = [];

我试过了：

    self.folders.splice(0,self.folders.length);
    self.files.splice(0,self.files.length);
    self.models.splice(0,self.models.length);

我不太确定但是我认为角度观察每个变量声明并绑定它。因此，如果我们将变量重置为[]，我认为它也会删除绑定。

但我仍然愿意接受建议和评论。谢谢。

角度控制器流如何工作？

1 个答案: