как связать значение области директивы для шаблона в angularjs

Я пытаюсь связать значение свойства ID для DIV с помощью angularjs директивыкак связать значение области директивы для шаблона в angularjs

Я хочу Div контейнер, в котором идентификатор контейнера будет передан в качестве параметра из Директива

<!DOCTYPE html> 
<html lang="en" ng-app="directivesModule"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Test</title> 
</head> 
<body> 


<h3>zendynamix Map Directive</h3> 
<zd-map map-id="indexmap" ></zd-map> 


<script src="scripts/angular.js"></script> 
<script> 

    (function() { 

     var zdMap = function() { 
      var template = '<div id="{{scope.mapId}}" > abd</div>' 
      function link(scope, elem, attrs) { 
       console.log("**********************"+scope.mapId) 

      } 
      return { 
       scope: { 
        mapId:'@' 

       }, 
       link: link, 
       template: template 
      }; 
     }; 




     angular.module('directivesModule', []) 
       .directive('zdMap', zdMap); 

    }()); 

</script> 


</body> 
</html>

, но когда я вижу проверить элемент в баузерах я получаю значение пустого ID

, пожалуйста, скажите, как это сделать. Мне нужно привязать значение параметра директивы к шаблону.

источник

2016-10-28 dhana lakshmi

использование '{{mapId}}' в вашем шаблоне должно исправить это. – Icycool

Вы не должны использовать scope в шаблоне вне функции link.

(function() { 
 

 
     var zdMap = function() { 
 
      var template = '<div id="{{mapId}}" > abd</div>' 
 
      function link(scope, elem, attrs) { 
 
       console.log("**********************"+scope.mapId) 
 

 
      } 
 
      return { 
 
       scope: { 
 
        mapId:'@' 
 

 
       }, 
 
       link: link, 
 
       template: template 
 
      }; 
 
     }; 
 

 

 

 

 
     angular.module('directivesModule', []) 
 
       .directive('zdMap', zdMap); 
 

 
    }());

<!DOCTYPE html> 
 
<html lang="en" ng-app="directivesModule"> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
 
    <meta charset="UTF-8"> 
 
    <title>Test</title> 
 
</head> 
 
<body> 
 

 

 
<h3>zendynamix Map Directive</h3> 
 
<zd-map map-id="indexmap" ></zd-map> 
 

 

 

 

 
</body> 
 
</html>

Пожалуйста, запустите выше фрагмент кода и проверить id

источник

2016-10-28 08:25:06 Sravan

Поскольку вы используете угловой 1.5+, возможно, я предлагаю использовать .component вместо .directive

(function() { 

     var zdMap = function() { 
      var template = '<div id="{{$ctrl.mapId}}" > abd</div>' 
      function controller() {console.log(this.mapId)} 
      return { 
       bindings: { // HERE !! 
        mapId:'@' 

       }, 
       controller: controller 
       template: template 
      }; 
     }; 




     angular.module('componentModule', []) 
       .component('zdMap', zdMap); // here!!!! 

    }());

HTML:

<!DOCTYPE html> 
<html lang="en" ng-app="componentModule"> 
<head> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <meta charset="UTF-8"> 
    <title>Test</title> 
</head> 
<body> 
<h3>zendynamix Map Directive</h3> 
<zd-map map-id="indexmap" ></zd-map> 
</body> 
</html>

источник

2016-10-28 08:32:33

как связать значение области директивы для шаблона в angularjs

ответ

Смежные вопросы