У меня есть следующий модуль:
(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"> </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
Что я сделал не так? Как код распространяется в этой ситуации?
Его довольно долго, и я старался быть конкретным, насколько это возможно. Благодарю.
Я нашел ответ на свой вопрос.
Вместо:
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);
Я не совсем уверен, но я думаю, что угловое наблюдает каждую декларацию переменной и связывает ее. Поэтому, если мы сбросим переменную в [], я думаю, что она также удаляет привязку.
Но они все еще открыты для предложений и комментариев. Благодарю.