如何在Angular指令中在模板上呈现范围变量

Question

[UPDATE] It turns out that if I use "@" as scope variable, it will be used in a async way when render template( I still can not figure out why and how ), the order will be compiple -> controller -> pre ->post ->observe, the strange thing is until POST stage, the scope.data still object, but inside the observe, it suddenly become string, could any one give me some help about why this happen( like when the template get data bind to it)? [更新]事实证明，如果我使用“ @”作为范围变量，则在渲染模板时将以异步方式使用它（我仍然不知道为什么和方式），顺序将是顺从的->控制器-> pre-> post->观察，奇怪的是直到POST阶段，scope.data仍然是对象，但是在观察中，它突然变成了字符串， 有人可以给我一些有关为什么发生这种情况的帮助（例如当模板获取时）数据绑定到它）？

var app = angular.module("vp", []);
app
.controller("main", function($scope){
    $scope.data = ["1", "2"];
})
.directive("chartBuilder", function(){
    return {
        restrict: "AE",
        scope: {
            data: "@data"
        },
        controller: function($scope){
            console.log($scope.data);
            $scope.data = JSON.parse($scope.data);
        },
        template: '<div><input ng-repeat="d in data track by $index" ng-model="data[$index]" /></div>',
        compile: function(EL, attrs){
            console.log(EL);
            return {                    
                pre: function(scope, EL, attrs){
                    console.log(scope.data);
                },
                post: function(scope, EL, attrs){
                // link: function(scope, EL, attrs){
                    console.log(scope.data);
                    attrs.$observe("data", function(d){
                        console.log(d);
                        scope.data = JSON.parse(scope.data);
                        console.log(d);
                    })
                }
            }
        }
    };
});

All: 所有：

I am pretty new to Angular directive, say I have a directive which accept attr from parent scope: 我对Angular指令还很陌生，说我有一个可以从父范围接受attr的指令：

<html ng-app="vp">
<head>
    <title></title>
</head>
<body ng-controller="main">

    <input ng-repeat="d in data track by $index" ng-model="data[$index]" />

    <chart-builder data={{data}}></chart-builder>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script type="text/javascript">
        var app = angular.module("vp", []);
        app
        .controller("main", function($scope){
            $scope.data = ["1", "2"];
        })
        .directive("chartBuilder", function(){
            return {
                restrict: "AE",
                scope: {
                    data: "@"
                },
                controller: function($scope){
                    $scope.data = JSON.parse($scope.data);
                },
                template: '<div><input ng-repeat="d in data track by $index" ng-model="data[$index]" /></div>',
                link: function(scope, EL, attrs){
                }
            };
        });
    </script>

</body>
</html>

Notice that I use "@" in directive, the reason is I want to set logic like : 注意，我在指令中使用“ @”，原因是我想设置如下逻辑 ：

The parent scope can affect the value in directive, but in directive, it is only allowed to copy the data from parent scope and any change inside it can not reflect to parent scope. 父作用域可以影响伪指令中的值，但是在伪指令中，只允许从父作用域复制数据，并且内部的任何更改都不能反映到父作用域。

So for example, the init parent scope data is [1,2], so the directive will get that as string(because @), and in controller, turn it into object, then render on the template. 因此，例如，初始父范围数据为[1,2]，因此该指令会将其作为字符串（因为@）获取，并在控制器中将其转换为对象，然后在模板上呈现。

But the thing is: 但问题是：

The data in directive is still a string when rendered on template , I wonder why the JSON.parse not work( in the controller of directive, It does work, but when bind to template, it still string ) 当在template上呈现指令时，指令中的数据仍然是字符串 ，我想知道为什么JSON.parse不起作用（在指令的控制器中，它确实有效，但是当绑定到模板时，它仍然为string）

Thanks 谢谢

Answer 1

Much simpler to just pass in the array reference: 传递数组引用要简单得多：

<chart-builder data="data"></chart-builder>

JS JS

 app
    .controller("main", function($scope){
        $scope.data = ["1", "2"];
    })
    .directive("chartBuilder", function(){
        return {
            restrict: "AE",
            scope: {
                data: "="
            },
            controller: function($scope){
                console.log($scope.data)// array not string ["1", "2"]  
            },
            template: '...',
            link: function(scope, EL, attrs){
            }
        };
    });

如何在Angular指令中在模板上呈现范围变量

问题描述

1 个解决方案

解决方案1
1 2016-01-21 18:43:32

如何在Angular指令中在模板上呈现范围变量

问题描述

1 个解决方案

解决方案1 1 2016-01-21 18:43:32

解决方案1
1 2016-01-21 18:43:32