Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/opencv/3.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript $scope变量在AngularJS中调用模态指令后重置_Javascript_Angularjs_Express_Pug_Angular Directive - Fatal编程技术网

Javascript $scope变量在AngularJS中调用模态指令后重置

Javascript $scope变量在AngularJS中调用模态指令后重置,javascript,angularjs,express,pug,angular-directive,Javascript,Angularjs,Express,Pug,Angular Directive,我正在制作一个AngularJS应用程序,它需要在一个简单的ID数组中处理并保存用户单击的所有复选框。如果数组中有元素,并且用户按下打开按钮,则会出现一个模式,用户可以执行操作。现在的问题是,当我在模式中按下关闭按钮时,我不明白为什么,但是包含所有ID的数组被重置,我需要重新选中所有复选框以重新保存所有ID 这是我的密码 App.js app.controller("requestsCtrl",["$scope", "$rootScope", "crud", function($scope, $

我正在制作一个AngularJS应用程序,它需要在一个简单的ID数组中处理并保存用户单击的所有复选框。如果数组中有元素,并且用户按下打开按钮,则会出现一个模式,用户可以执行操作。现在的问题是,当我在模式中按下关闭按钮时,我不明白为什么,但是包含所有ID的数组被重置,我需要重新选中所有复选框以重新保存所有ID

这是我的密码 App.js

app.controller("requestsCtrl",["$scope", "$rootScope", "crud", function($scope, $rootScope, crud){

$scope.selectedItemsId = [];
$scope.checkedAllActive = false;


//REQUESTS LOADER
crud.read(null,0, null).then(function(d){
    $scope.requests = JSON.parse(JSON.stringify(d.data));
});


//EMIT
$scope.emit = function (emitType, action) {
    console.log($scope.selectedItemsId);
    $rootScope.$broadcast(emitType, {emitType: emitType, action: action, ids: $scope.selectedItemsId});
};

$scope.checkboxHandler = function (id) {
    $rootScope.handleCheckbox($scope.selectedItemsId, id);
};
}]);

app.directive("request", function ($rootScope, $templateCache, $compile, crud) {
return {
    restrict: 'E',
    scope: { message: "=" },
    link: function ($scope, element, attr) {
        $scope.name = "request";
        $scope.ids = [];



        $scope.$on("acceptRequest", function (event, data) {

            if(data.action){
                console.log("open");
                $rootScope.InjectTemplate(element, $scope.name, $scope);
                $("#modalBackground").addClass("is-visible");
                $scope.ids = data.ids;
                $scope.setTask();
            }
            else {
                console.log("close");
                $rootScope.RemoveTemplate(element);
                $("#modalBackground").removeClass("is-visible");
                $scope.ids = [];
            }
        });


        $scope.close = function () {
            $scope.$broadcast("acceptRequest", { action: false });
        };

        $scope.setTask = function () {
            if($scope.ids.length > 0){
                crud.read($scope.ids.shift(), null, null).then(function (data, err) {
                    $scope.actualTask = new actualTask(data.data[0]);
                });
            }
            else {
                $scope.close();
            }
        };
        $scope.acceptButtonClick = function () {
            $rootScope.$broadcast("submit", {});
            if($rootScope.date){
                var objUpdate = {
                    id: $scope.actualTask._id

                };

                console.log($scope.actualTask);



            }

        };
    }
};
});

app.directive("row", function($rootScope){
return {
    restrict: 'A',
    templateUrl: "row.html",
    scope: { data: "=row", triggerController: "=change"},
    link: function($scope, element, attrs){
    }
};
});
app.run(function ($rootScope, $templateCache, $compile, crud) {
//GLOBAL VARIABLE
$rootScope.date = false;

//------------------

//HANDLE CHECKBOX
$rootScope.handleCheckbox = function (selectedIds, id) {
    var i = selectedIds.indexOf(id);
    if(i !== -1)
        selectedIds.splice(i, 1);
    else
        selectedIds.push(id);

    console.log(selectedIds);
};
//---------------


//DOWNLOAD ACTUAL TASK
$rootScope.ActualTaskOrExit = function (ids) {

    if(ids.length > 0){

        crud.read(ids.shift(), null, null).then(function (data, err) {
            console.log(data.data[0]);
            return new actualTask(data.data[0]);
        });
    }
    else {
        return false;
    }
};

//---------------

//INJECT AND REMOVE TEMPLATE
$rootScope.InjectTemplate = function (element, template, $scope) {
    var template = $templateCache.get(template);
    element.html(template);
    $compile(element.contents())($scope);
};

$rootScope.RemoveTemplate = function (element) {
    element.html("");
};
//----------------------------

//DATE FUNCTIONS
$rootScope.fromUTCtoITimestamp = function (data) {
    var date = data.split('T')[0];
    var hours = data.split('T')[1].substring(0,5);

    var year = date.split('-')[0];
    var month = date.split('-')[1];
    var day = date.split('-')[2];
    var hour = hours.split(':')[0];
    var minutes = hours.split(':')[1];

    return Date.UTC(year, month, day, hour, minutes);
};
$rootScope.fromTimestampToUTC = function (data) {
    return new Date(data).toISOString();
};
//--------------------


$rootScope.getModalTemplate = function (modalType) {
    return $templateCache.get(modalType);
};

$rootScope.getDate = function (data) {
    var t = data.split('T');
    var day = t[0].split('-');
    var dateOne = day[2] + '/' + day[1] + '/' + day[0];
    var hours = t[1].split(':');
    var dateTwo = hours[0] + ":" + hours[1];
    return dateOne + " " + dateTwo;
};
});

app.service("crud", ["$http","$location", function($http, $location){
var service = this;

service.create = function(obj){
    return $http({
        method: 'PUT',
        url: "/app/create",
        data: { obj: obj }
    });
};
service.read = function (id, status, date) {
    if(id == null && status == null && date == null) return null;
    return $http({
        method: 'GET',
        url: "/app/read",
        params: {id: id, status: status, date: date }
    });
};
service.delete = function(id){
    return $http({
        method: 'DELETE',
        url: "/app/delete",
        params: { id: id }
    });
};
service.update = function(obj, path){
    return $http({
        method: 'PUT',
        url: path == 0 ? "/app/update" : "/app/updateProfile" ,
        data: { obj: obj }
    });
};
}]);
Index.jade

script(type="text/ng-template" id="requests.html")
  h1="Richieste"
  div
    button(ng-click="emit('acceptRequest', true)" ).buttonModify="Accetta"
    button(ng-click="emit('removeRequest', true)" ).buttonTerminate="Rimuovi"
  table
    tr
      th
        a(ng-click="selectAll()")#selectAll.mdi.mdi-arrow-down-drop-circle.mdi-24px.mdi-light
      th="ORDINE"
      th="DISPOSITIVO"
      th="APPUNTAMENTO"
      th="CLIENTE"
    tr( ng-repeat="request in requests" id="{{ request._id }}" row="request" change="checkboxHandler")
  div#noData
    {{ requests.length == 0 ? "Nessuna Richiesta da mostrare" : ""}}

div#modalBackground
  request

script(type="text/ng-template" id="row.html")
  td
    input(type="checkbox" ng-model="check" value="{{ data._id }}" ng-change="triggerController(data._id)"  )
  td="{{ data.ordercode }}"
  td="{{ data.device }}"
  td="{{ data.appointment }}"
  td="{{ data.name + ' ' + data.surname }}"
使用添加和删除模式模板。
ng if
指令创建一个子作用域,因此可以通过销毁子作用域来删除由
$compile
服务创建的任何监视程序和指令绑定。否则,打开和关闭modal会向未移动的观察者泄漏内存

$rootScope
存在,但可用于邪恶 AngularJS中的作用域形成一个层次结构,典型地从树顶部的根作用域继承。通常可以忽略这一点,因为大多数视图都有自己的控制器,因此也有自己的作用域

有时,您希望将某些数据片段设置为整个应用程序的全局数据。对于这些,您可以注入
$rootScope
,并像任何其他作用域一样在其上设置值。由于作用域继承自根作用域,这些值将可用于附加到指令(如
ng show
)的表达式,就像本地
$scope
上的值一样

当然,全局状态很糟糕,您应该谨慎地使用
$rootScope
,就像您(希望)在任何语言中使用全局变量一样。特别是,不要将其用于代码,仅用于数据。如果你想把一个函数放到
$rootScope
上,那么最好把它放到一个可以在需要的地方注入的服务中,并且更容易测试

相反,不要创建一个服务,它的唯一目的是存储和返回数据位

使用添加和删除模式模板。
ng if
指令创建一个子作用域,因此可以通过销毁子作用域来删除由
$compile
服务创建的任何监视程序和指令绑定。否则,打开和关闭modal会向未移动的观察者泄漏内存

$rootScope
存在,但可用于邪恶 AngularJS中的作用域形成一个层次结构,典型地从树顶部的根作用域继承。通常可以忽略这一点,因为大多数视图都有自己的控制器,因此也有自己的作用域

有时,您希望将某些数据片段设置为整个应用程序的全局数据。对于这些,您可以注入
$rootScope
,并像任何其他作用域一样在其上设置值。由于作用域继承自根作用域,这些值将可用于附加到指令(如
ng show
)的表达式,就像本地
$scope
上的值一样

当然,全局状态很糟糕,您应该谨慎地使用
$rootScope
,就像您(希望)在任何语言中使用全局变量一样。特别是,不要将其用于代码,仅用于数据。如果你想把一个函数放到
$rootScope
上,那么最好把它放到一个可以在需要的地方注入的服务中,并且更容易测试

相反,不要创建一个服务,它的唯一目的是存储和返回数据位


模式窗口阻止用户访问程序界面的其余部分,直到对话框关闭。因此,您不应过度使用任何创建对话框(或模式窗口)的功能。模式窗口会阻止用户在对话框关闭之前访问程序界面的其余部分。因此,您不应过度使用任何创建对话框(或模式窗口)的函数。