Вложенная (первая) пользовательская директива другая (вторая) директива перемещает (первую) пользовательскую директиву в childscope вместо области видимости - PullRequest
Новая
       27

Вложенная (первая) пользовательская директива другая (вторая) директива перемещает (первую) пользовательскую директиву в childscope вместо области видимости

0 голосов
/ 30 мая 2019

Ниже приведен шаблон, который работает до такой степени, что директива webix-ui указывает на childscope, поскольку она находится внутри ng-if ...

Мне нужно ng-if, чтобы дождаться $scope.init() чтобы завершить получение данных, прежде чем я инициализирую объекты конфигурации компонентов пользовательского интерфейса.

Как мне указать область, а не childscope в моей директиве webix-ui?

   <div id="formcontainer" ng-app="Risk" ng-controller="CreateRiskController" get-risk>
        <div id="mycreateform" class="container" type="space" layout-padding="">     
            <form id="form" name="CreateRisk" role="form" ng-submit="valid() && submit()" novalidate>
                <div id="details" class="layout table" border="1">                               
                    <div class="tr">
                        <div class="td label">
                            Title
                        </div>
                        <div class="td locked">
                           <div ng-if="initDone">
                              <div webix-ui="config.risktitle" width="500" 
                                   height="30" type="text" id="risktitle"
                                   name="risktitle">
                              </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
         </div>
    </div>

Это указывает на область действия правильно, поскольку оно не вложено в ng-if 

angular.module('Risk').directive('getRisk', getRisk); 

function getRisk(){
     return {
            restrict: 'A',
            controller: function ($scope, $http, $sce){

                $scope.risklevels = {
                    riskmaximum: '',
                    riskhigh: '',
                    riskmedium: '',
                    riskminimum: ''
                }

                $scope.riskMatrix = [];
                for(var l = 1; l <= 5; l++)
                {
                    $scope.riskMatrix[l] = [];
                    for (var c = 0; c <= 5; c++)
                    {
                        $scope.riskMatrix[l][c] = '';  
                    }
                }

                $scope.initDone = false;

                $scope.init = function(){
                      angular.element(document.querySelector('link[href="/app/tool/risk/CreateRisk.css"]')).remove();
                      angular.element(document.querySelector('head')).append('<link type="text/css" rel="stylesheet" href="/app/tool/risk/CreateRisk.css"/>'); 

                      return $http.get('/api/riskconfig').then(function(response){
                           if (response.data.Succeeded){
                                $scope.risklevels.riskmaximum = response.data.Result.Levels[0].riskmaximum;
                                $scope.risklevels.riskhigh = response.data.Result.Levels[0].riskhigh;
                                $scope.risklevels.riskmedium = response.data.Result.Levels[0].riskmedium;
                                $scope.risklevels.riskminimum = response.data.Result.Levels[0].riskminimum; 


                                for (var idx = 0; idx < response.data.Result.Thresholds.length; idx++)
                                {
                                    var l = response.data.Result.Thresholds[idx].likelihood;
                                    var c = response.data.Result.Thresholds[idx].consequence;
                                    v = response.data.Result.Thresholds[idx].level;
                                    $scope.riskMatrix[l][c] = v;
                                }

                                return response.data.Result;
                           }
                           else{
                                $scope.msg = $sce.trustAsHtml(response.data);
                           }
                      });
                } 

                $scope.init().then(function(){
                    $scope.initDone = true;
                    return $scope.initDone;
                });
            } 
     }  
}

В настоящее время это указывает на ChildScope (должно указывать наScope Вместо), потому что он вложен в ng-if в шаблоне 

angular.module('Risk').directive('webixUi', WebixElement);

function WebixElement(DOMops, ValidationService){                   
      var directive = {
            restrict: 'A',
            link: linkFn,
            controller: webixUiController,
            bindToController: true
      }

      function linkFn(scope, element, attrs) {                       
      }

      return directive;            
}


function webixUiController($scope, $attrs, DOMops, ValidationService){
    var attr = $attrs.name;
    var type = $attrs.type;
    var width = $attrs.width;
    var height = $attrs.height;
    var maxlength = $attrs.hasOwnProperty('maxlength')? $attrs.maxlength: null;  

    var view;
    if (type == "level")
        view = "text";
    else
        view = type;

    var config = 
    {
        view: view,
        value: $scope.risk[attr],      
        on: {
            "onTimedKeyPress": function(code){  
                var obj = this.eventSource || this; 
                ValidationService.handleKeyPress(obj, code, attr);
                if (type == "level")
                    DOMops.assignRiskLevel(scope, obj); 
            },
            "onBlur": function(code){  
                var obj = this.eventSource || this;  
                ValidationService.updateAndValidate(obj,code,attr); 
            }
        },
        responsive: true,
        width: width,
        height: height
    };
    if (maxlength)
        config.attributes = {maxlength : maxlength};
    $scope.config[$attrs.name] = config; 
}

1 Ответ

0 голосов
/ 30 мая 2019

Один из подходов к установке значений из компонента атрибута заключается в использовании scope.$eval вручную оценить атрибут выражения: 

$scope.$eval($attrs.onConfig, {$config: config});

Использование: 

<div webix-ui="config.risktitle" width="500" 
     height="30" type="text" id="risktitle"
     name="risktitle" on-config="config.risktitle = $config">
</div>

Когда директива инициализируется, она оценивает выражение в атрибуте on-config с $config как локальное.

Наследование области обычно прямолинейно ... до тех пор, пока вам не понадобится двухстороннее связывание данных (то есть элементы формы, ng-модель) в дочерней области. Ng-repeat, ng-switch и ng-include могут сбить вас с толку, если вы попытаетесь связать примитив (например, число, строку, логическое значение) в родительской области изнутри дочерней области. Это не работает так, как ожидает большинство людей. Дочерняя область действия получает свое собственное свойство, которое скрывает / скрывает родительское свойство с тем же именем.

Способ заставить его работать - определить объекты в родительском объекте для вашей модели, а затем сослаться на свойство этого объекта в дочернем объекте.

Итак, в родительском контроллере определим объект: 

 $scope.config = {};

Это следует из лучшей практики "всегда иметь". в ваших моделях ".

Для получения дополнительной информации см.

...