Question

我在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();

            });
        }
    };
});

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

Answer 1

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

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

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

Answer 2

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

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;
});

指令中的范围更改不适用于视图

2 个答案: