纳奇夫 (.)DOT 表示法范围继承在指令模板中不起作用 2 种方式

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>

狼疮模态指令：

.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();
        }
    };
}
]);

索引.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>