如何在Angular指令中的模板上渲染範圍變量

[UPDATE]事實證明，如果我使用「@」作爲範圍變量，它將在渲染模板時以異步方式使用（我仍然無法找出原因並且如何），順序將是compiple - > controller - > pre - > post - >觀察，奇怪的是直到POST階段，scope.data仍然是對象，但是在觀察裏面，它突然變成了字符串，可能是任何一個給我一些關於爲什麼會發生這種情況的幫助（就像模板獲取數據綁定的時候一樣）？如何在Angular指令中的模板上渲染範圍變量

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); 
        }) 
       } 
      } 
     } 
    }; 
});

所有：

我非常新的角度指令，說我有一個指令，它接受來自父範圍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>

請注意，我用「 @「在指令中，原因是我想設置邏輯像：

父級作用域可以影響指令中的值，但在指令中，只允許從父級作用域複製數據，並且其中的任何更改都不能反映到父作用域。

因此，例如，初始父級作用域數據是[1,2]，因此指令會將其作爲字符串（因爲@），並在控制器中將其轉化爲對象，然後在模板上進行渲染。

但事實是：

在指令中的數據仍然是當模板呈現一個字符串，但不知爲何，JSON.parse無法正常工作（在指令的控制器，它的工作，但是當綁定模板，它仍然字符串）

感謝

來源

2016-01-21 Kuan

嘗試在鏈接文件，甚至在數據= {{JSON.parse ...}} –

@SimonH謝謝，我都嘗試解析，而不是工作。我認爲控制器會先運行，所以我決定在那裏轉換，但仍然不起作用。你能告訴我你身邊的樣子嗎？ – Kuan

簡單多了，只是傳遞數組引用：

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

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){ 
      } 
     }; 
    });

來源

2016-01-21 18:43:32 charlietfl

謝謝，你能告訴我爲什麼這段代碼可以防止指令作用域變化影響父作用域數據嗎？我試過這個，但父範圍變化以及 – Kuan

可以通過副本....看到'angular.copy（）'在文檔 – charlietfl

謝謝，但你能告訴我如何在我的例子中使用angular.copy（數據），我試過但不行！ – Kuan

如何在Angular指令中的模板上渲染範圍變量

回答

相關問題