AngularJS模板/指令/范围-嵌套指令参见childscope,如何使它们参见范围?

时间:2019-05-29 14:55:38

标签: angularjs templates angularjs-directive

在下面的代码中,get-risk指令在作用域级别运行,而webix-ui在ChildScope级别运行...

如何使webix-ui指令和所有嵌套的div包括get-risk来查看与ng-controller对应的作用域级别,以防止在我的指令中使用$ scope。$ parent来访问模块CreateRiskController代码? / p>

这是AngularJS的默认行为吗,如何使整个模板仅看到Scope(这是我模板的最高标记)?

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

修改后的模板表现出相同的行为

<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 class="tr">    
                    <div class="td label">
                        Risk Statement
                    </div>
                    <div class="td locked">
                        <div ng-if="initDone"><div webix-ui="config.riskstatement" width="500" height="97" type="textarea" id="riskstatement" name="riskstatement"></div></div>
                    </div>
                </div>
                <div class="tr">
                    <div class="td label">
                        Context
                    </div>
                    <div class="td locked">
                        <div ng-if="initDone"><div webix-ui="config.context" width="500" height="97" type="textarea" id="context" name="context"></div></div>
                    </div>
                </div>
                <div class="tr">
                    <div class="td label">
                        Closure Criteria
                    </div>
                    <div class="td locked">
                        <div ng-if="initDone"><div webix-ui="config.closurecriteria" width="500" height="97" type="textarea" id="closurecriteria" name="closurecriteria"></div></div>
                    </div>
                </div>
                 <!--tr class="text">
                        <div class="td label">
                            Category
                        </div>
                        <div class="locked">
                             <div id="category" name="category" />
                        </div>
                  </div-->
            </table>
            <h2>Initial Risk Assessment</h2>
            <div class="nested">
                <div class="info">
                    <div id="details" class="table" border="1">
                        <div class="tr">
                            <div class="td label">
                                Likelihood
                            </div>
                            <div class="td locked">
                                <div ng-if="initDone"><div webix-ui="config.likelihood" width="30" height="30" type="level" id="likelihood" name="likelihood" maxlength="1"></div></div>
                            </div>
                        </div>
                        <div class="tr">
                            <div class="td label" colspan="2">
                                Consequence
                            </div>
                        </div>
                         <div class="tr">
                            <div class="td label margin-left">
                                Technical
                            </div>
                            <div class="td locked">
                                <div ng-if="initDone"><div webix-ui="config.technical" width="30" height="30" type="level" id="technical" name="technical" maxlength="1"></div></div>
                            </div>
                        </div>
                         <div class="tr">
                            <div class="td label margin-left">
                                Schedule
                            </div>
                            <div class="td locked">
                                <div ng-if="initDone"><div webix-ui="config.schedule" width="30" height="30" type="level" id="schedule" name="schedule" maxlength="1"></div></div>
                            </div>
                        </div>
                         <div class="tr">
                            <div class="td label margin-left">
                                Cost
                            </div>
                            <div class="td locked">
                               <div ng-if="initDone"><div webix-ui="config.cost" width="30" height="30" type="level" id="cost" name="cost" maxlength="1"></div></div>
                            </div>
                        </div>
                    </div>
                     <div name="level"></div>
                </div> 
                &nbsp;&nbsp;    
                <div class="info" ng-if="initDone">
                    <table class="matrix" id="riskmatrix">
                    <tbody>
                    <tr ng-repeat="likelihood in [5,4,3,2,1]">
                            <td ng-if="likelihood == 2" class="vlabel">Likelihood</td>
                            <td ng-if="likelihood != 2"></td>
                            <td class="likelihood">{{likelihood}}</td>
                            <td ng-repeat="consequence in [1,2,3,4,5]" name="risk[{{likelihood}}][{{consequence}}]" ng-model="riskMatrix[likelihood][consequence]" ng-class="[riskLevel(likelihood,consequence)]"></td>
                    </tr>
                    <tr>
                            <td></td>
                            <td></td>
                            <td ng-repeat="consequence in [1,2,3,4,5]">{{consequence}}</td>
                    </tr>
                    <tr>
                        <td></td><td></td><td colspan="5">Consequence</td> 
                    </tr>  
                    </tbody></table>
                </div>
                 &nbsp;&nbsp;   
            </div>
        <divider></divider>
        <div>
            <div>
              <button id="submit" type="submit" disabled="disabled" class="raised primary">Create Risk</button>
            </div>
        </div>
        <div>
          <div class="msg" layout-align="center">
            <span ng-bind-html="msg">{{msg}}</span>
          </div>
        </div>
        </form>
    </div>
</div>

0 个答案:

没有答案