Question

我无法理解为什么这不起作用。我认为ng-if上的点符号表示2路数据绑定，但我无法在ng-if范围内更改父$ scope.modal.active。

template / lupus / modal / modal.html：

<div class="lupus-modal">
    <img ng-src="{{lupusModalImg}}" class="img-responsive"/>
    <div ng-if="modal.active" class="backdrop modal-backdrop" ng-click="modal.active = false" > //this ng-click doesn't work as I expected
        <img ng-src="{{lupusModalImg}}"/>
    </div>
</div>

lupusModal指令：

.directive('lupusModal', [

function () {
    return {
        scope: {
            lupusModalImg: '='
        },
        restrict: 'AE',
        transclude: true,
        templateUrl: 'template/lupus/modal/modal.html',
        controller: function ($scope, $element, $attrs, $transclude) {
            $scope.modal = {
                active: false,
                close: function () {
                    $scope.modal.active = false;
                    $scope.$apply();
                }
            };

            $element.on('click', function () {
                $scope.modal.active = true; 
                $scope.$apply();
            });

        },
        link: function (scope, iElement, iAttrs, backdropCtrl) {
            //backdropCtrl.$element.$scope.slideElm[0].getBoundingClientRect();
        }
    };
}
]);

的index.html：

<a href="javascript:void(0);" lupus-modal lupus-modal-img="'img/certificates/UygunlukSertifikasi1.jpg'"></a>

Answer 1

如果我正确理解了这个问题，那么你正在你的指令中创建隔离范围，它不会从其父范围继承。

使用modal.active在指令范围声明中使用=设置双向绑定

         scope: {
            lupusModalImg: '=',
            modal:'='
        },

并使用

声明您的指令

<a href="javascript:void(0);" lupus-modal lupus-modal img="'img/certificates/UygunlukSertifikasi1.jpg'" modal='modal'></a>

ngIf（。）DOT表示法范围继承在指令模板中不起作用

1 个答案: