在 ionicModal 中的指令首先遵守，甚至在控制器加载之前

问题描述

我有一个 $ionicModal ，里面有一个指令，我们称之为 <scrap-link-cards> ，它接受范围对象的双向数据绑定值.这是在 $ionicModal 模板中:-->

</scrap-link-cards>

这是我的完整指令:

.directive('scrapLinkCards', function ($log) {var 控制器 = 函数($scope){$scope.links = angular.copy($scope.datasource);//不明确的$scope.LastIndex = $scope.links.length - 1;};var templateUrl ='/path/to/template' ;返回{限制:'E'，控制器:控制器，范围: {数据源:'='},模板网址:模板网址}})

这是我的templateUrl的模板:

{{links[LastIndex].title}}
<p>{{links[LastIndex].description}}</p>

请注意，这是在 $ionicModal 中:

$ionicModal.fromTemplateUrl('path/to/template/html', {范围:$范围，动画:向上滑动"}).then(函数($ionicModal){$scope.ReadMore = $ionicModal;});

现在这是我的问题，因为它在 $ionicModal 内，HTML 被编译，然后 angular 可以访问 (updates.updates_links).我在 $scope.links 得到一个未定义的对象.我该如何解决这个问题?我已经尝试使用链接函数的指令，(移动链接中的所有逻辑)仍然......我认为$ionicModal模板是在控制器加载之前编译的?是吗?

解决方案

我设法创建的唯一解决方法是停止编译函数以达到 Modal 的指令.使用 ng-if 并用 div 包装指令.

在模态模板中:

<scrap-link-cards datasource=(updates.update_links)></scrap-link-cards>

这样编译器就会离开指令，只有在用户打开模态时才会遵守.

I have a $ionicModal and inside that I have a directive, lets call it <scrap-link-cards> , this takes in the a two way data bind value of a scope object. This is inside a $ionicModal template:-->

<scrap-link-cards datasource=(updates.update_links)> </scrap-link-cards> 

This is my full directive:

.directive('scrapLinkCards', function ($log) {
        var controller = function ($scope) {
            $scope.links = angular.copy($scope.datasource); //undefined
            $scope.LastIndex = $scope.links.length - 1;
        };
       var templateUrl ='/path/to/template' ;

        return{
            restrict :'E',
            controller: controller,
            scope: {
              datasource :'='
            },
            templateUrl : templateUrl
        }
    })

This is my templateUrl's Template:

<div class="scrapLinks">
    <h3>{{links[LastIndex].title}}</h3>
    <p>{{links[LastIndex].description}}</p>
</div>

Please NOTE that, this is inside a $ionicModal:

$ionicModal.fromTemplateUrl('path/to/template/html', {
        scope: $scope,
        animation: 'slide-in-up'
    }).then(function ($ionicModal) {
        $scope.ReadMore = $ionicModal;
});

Now here is my problem, since its inside a $ionicModal, the HTML gets complied, before angular can have access to (updates.updates_links). I get a undefined object at $scope.links. How can I workaround this? I have tried using link function of directive, (moved all the logic in link) still.. I think $ionicModal templates are compiled before controller loaded ? Is it?

解决方案

The only work around I managed to create is to stop the compile function to ever reaching the Modal's directive. Using a ng-if and wrapping the directive with a div.

In the Modal's template :

<div ng-if="updates"><scrap-link-cards datasource=(updates.update_links)> </scrap-link-cards> </div>

This way the complier leaves the directive and only complies when the user opens the modal.

这篇关于在 ionicModal 中的指令首先遵守，甚至在控制器加载之前的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！