javascript - 关于angularjs指令的问题,dom中的id先生成还是link函数先执行?
黄舟
黄舟 2017-04-11 11:34:39
[JavaScript讨论组]

模板中:

指令文件:

'use strict';
angular.module('main')
.directive('map', function ($timeout, $state, Im) {
    return {
        restrict: 'A',
        scope: {
            message: '='
        },
        link: function (scope, element, attrs) {
            // $timeout(function () {
                var map = new AMap.Map(scope.message.messageUId, {
                    resizeEnable: true,
                    zoom: 14,
                    center: [scope.message.content.longitude, scope.message.content.latiude]
                });

                var marker = new AMap.Marker({
                    icon: 'http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png',
                    position: [scope.message.content.longitude, scope.message.content.latiude]
                });

                marker.setMap(map);

            // }, 100);

            element.on('click', function () {
                Im.setPointWrapper(scope.message);
                $state.go('location');
            });
        }
    };
});

ngRepeat的模板就是上面的模板
因为高德地图需要根据dom的id来生成地图,现在发现好像link函数执行的时候,id还没有生成还是双花括号那个状态,必须要将上面的注释去掉延迟执行才行。这是为什么呢?应该怎么解决?

黄舟
黄舟

人生最曼妙的风景,竟是内心的淡定与从容!

全部回复(1)
黄舟

angularjs会先编译模板,然后才再注入属性值,像这样:

var compileFn = $compile('<p>{{total}}</p>');//编译模板
var element = compileFn(scope);// 绑定数据

link 之后类似与执行了上面的第一步,还没有到绑定数据的那一步,所以你取不到值。要想取到值,你必须这样:

// 等待数据绑定完成后,加载代码
scope.$evalAsync(function(){
    //你的代码
})

或者这样

// 使用$watch
scope.$watch(attrs.id, function(newValue, oldValue){
    // 你的代码
})
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号