Question

以下是一个模板，该模板可以工作到webix-ui指令指向childscope的程度，因为它位于ng-if ...

内部

在初始化ui组件配置对象之前，我需要ng-if等待$scope.init()完成数据获取。

如何在我的webix-ui指令中指向作用域而不是childscope？

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

Answer 1

从属性组件设置值的一种方法是使用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-model）。如果您尝试从子作用域内部绑定到父作用域中的原始值（例如，数字，字符串，布尔值），那么Ng-repeat，ng-switch和ng-include可能会使您绊倒。它不能像大多数人期望的那样工作。子作用域具有其自己的属性，该属性隐藏/阴影相同名称的父属性。

使其工作的方法是在模型的父级中定义对象，然后在子级中引用该对象的属性。

因此在父控制器中定义对象：

 $scope.config = {};

这遵循“始终具有'。”的最佳做法。在您的模型中”。

有关更多信息，请参见

嵌套（第一个）自定义指令另一个（第二个）指令将（第一个）自定义指令移动到子范围而不是作用域

1 个答案: