Как работает Angular Controller flow?

0

У меня есть следующий модуль:

(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

Что я сделал не так? Как код распространяется в этой ситуации?

Его довольно долго, и я старался быть конкретным, насколько это возможно. Благодарю.

Теги:
controller
angularjs-scope
angularjs-directive
angularjs-controller

1 ответ

0

Я нашел ответ на свой вопрос.

Вместо:

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

Я не совсем уверен, но я думаю, что угловое наблюдает каждую декларацию переменной и связывает ее. Поэтому, если мы сбросим переменную в [], я думаю, что она также удаляет привязку.

Но они все еще открыты для предложений и комментариев. Благодарю.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню