0

我在 template.html 中有一个指令，包含在 ng-include 中，在这个指令中我更改了范围，但在我看来它没有改变

这是我的html

<div ng-controller="myCtrl">
    <div id="modal">
        <div ng-show="showDIv">Somthing to controll</div>
    </div>
    <div ng-include src="template.html">
</div>

这是我的模板

 <a ng-support></a>

这是我的指令 

app.directive('ngSupport', function(){
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
           elem.bind('click', function(e) {
               $("#modal").dialog({height:518,width:900,modal:true });
               scope.showDiv = true;
               scope.$apply();

            });
        }
    };
});

当我更改指令中的范围时，它不适用于视图，有人可以帮忙吗？

4

2 回答 2

1

ng-include创建一个新范围，因此scope.showDiv只影响本地范围。根据您希望如何构建应用程序，您可以尝试访问scope.$parent.showDiv，但这并不是真正的未来证明，因为它将取决于 HTML 嵌套。

更好的解决方案是将showDiv属性存储在父范围内的对象中。例如scope.ui = {}，这样，当您scope.ui.showDiv = true在指令中设置时，它将自动查找父范围（使用原型继承），而不是将属性添加到本地范围。

最后，另一种解决方案是重构您的代码以使其不那么复杂：我认为仅使用 ng-include 来添加一个元素是一种矫枉过正的做法，您可以直接<a ng-support></a>放在 html 中，这样可以避免中介遇到的问题正在生成的范围。

于 2013-08-01T10:08:38.540 回答
0

另一种选择是广播一个事件，并在控制器中观察它。像这样的东西。

app.directive('ngSupport', function($rootScope){
    return {
        restrict: 'A',
        link: function(scope, elem, attr, ctrl) {
           elem.bind('click', function(e) {
               $("#modal").dialog({height:518,width:900,modal:true });
               $rootScope.$broadcast('event:modal-clicked');
            });
        }
    };
});

在您的控制器中使用它。

$scope.$on('event:modal-clicked', function() {
    $scope.showDiv = true;
});
于 2013-08-01T16:26:35.380 回答