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

How to render scope variable on template in Angular directive

本文关键字：变量 范围 Angular 指令      更新时间：2023-09-26

[更新] 事实证明，如果我使用"@"作为范围变量，它将在渲染模板时以异步方式使用（我仍然无法弄清楚为什么以及如何），顺序将是compre ->控制器->pre ->post ->observe，奇怪的是直到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);
                    })
                }
            }
        }
    };
});

都：

我对 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>

请注意，我在指令中使用了"@"，原因是我想设置如下逻辑：

父作用域

可以影响指令中的值，但在指令中，只允许从父作用域复制数据，并且其中的任何更改都不能反映到父作用域。

例如，init 父范围数据是 [1,2]，因此指令会将其作为字符串（因为 @）获取，并在控制器中将其转换为对象，然后在模板上呈现。

但问题是：

指令中的数据在模板上呈现时仍然是字符串，

我想知道为什么 JSON.parse 不起作用（在指令的控制器中，它确实有效，但是当绑定到模板时，它仍然是字符串）

谢谢

传入数组引用要简单得多：

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

.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){
            }
        };
    });
相关文章：