Question

我已经编写了一个自定义指令来显示

1）标签文字（或）

2）输入（或）

3）Textarea

基于模式值。

<div ng-app="myApp" ng-controller="myCtrl">
    <h1>{{obj}}</h1>
    <div>
        <textbox ng-model='obj.firstName' rows="2"></textbox>
    </div>
</div>
<script>
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function($scope) {
        $scope.obj = {};
        $scope.tMode = 'edit';
    });
    app.directive('textbox', function(){
        return {
            restrict: "E",
            scope:{
                rows : '@',
                ngModel : '='
            },
            template:
                "<h4>{{ngModel}}</h4>" + 
                "<label ng-if=\"$parent.tMode == 'view'\" ng-bind='ngModel'></label>" + 
                "<input ng-if=\"$parent.tMode == 'edit' && (!rows || rows <= 1)\"  type='text' class='form-control' ng-model='ngModel'>" +
                "<textarea ng-if=\"$parent.tMode == 'edit' && rows && rows > 1\" rows='rows' class='form-control' ng-model='ngModel'></textarea>"
        }
    });
</script>

由于条件是在ng-if而不是ng-show \ ng-hide指令模板中声明的，因此我无法显示<h4>{{ngModel}}</h4>，因为ng-if会创建子范围input / textarea字段。

我知道如果在模板中声明为ng-model="$parent.ngModel"，则可以访问模型值。

但是如果它被声明为ng-model="$parent.ngModel"可以吗？我认为这有点不直接。有没有其他方法可以解决这个问题？（除了使用ng-show / ng-hide）

ng-if在Custom Directive模板中的角度范围

0 个答案: