关于angularjs指令的问题，dom中的id先生成还是link函数先执行？

Question

模板中:

<div class="item item-avatar-right chat-me text-right" ng-if="message.from === 'myself'">
  <img src="main/assets/images/user01.jpg">
  <p class="positive-bg chat-text chat-map" id="{{ message.messageUId }}" map message="message">
  </p>
</div>
<div class="item item-avatar-left chat-friend" ng-if="message.from === 'friend'">
  <img ng-src="{{ vm.discussion.headPortrait }}">
  <p class="stable-bg chat-text chat-map" id="{{ message.messageUId }}" map message="message">
  </p>
</div>

指令文件:

'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还没有生成还是双花括号那个状态，必须要将上面的注释去掉延迟执行才行。这是为什么呢？应该怎么解决？

Answer 1

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

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

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

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

或者这样

// 使用$watch
scope.$watch(attrs.id, function(newValue, oldValue){
    // 你的代码
})