如何将指令范围值绑定到angularjs中的模板答案

【问题标题】：how to bind directive scope value to template in angularjs如何将指令范围值绑定到angularjs中的模板
【发布时间】：2016-10-28 16:32:33
【问题描述】：

我正在尝试使用 angularjs 指令为 div 绑定 id 属性值

我想要一个 div 容器，其中容器的 id 将作为指令中的参数传递

<!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>

但是当我在 bowser 中看到检查元素时，我得到了空的 id 值

请说一下怎么做我需要将指令参数的值绑定到模板

【问题讨论】：

在您的模板中使用{{mapId}} 应该可以修复它。

标签： css angularjs angularjs-directive directive

【解决方案1】：

您不应在link 函数之外的模板中使用scope。

    (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>

请运行上面的 sn-p 并检查id

【讨论】：

【解决方案2】：

由于您使用的是 angular 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>

【讨论】：