如何使用 angularjs 將 $scope 變量從 controller 傳遞給指令

Question

我做了一個打印 object 的簡單指令：

var app = angular.module("myApp", []);

app.controller('myCtrl', function($scope) {

$scope.users=[
{name:'davidi',age:'23'},
{name:'karen',age:'43'},
{name:'lior',age:'22'}
];

});


app.directive("appCustomer", function() {

var htmlcode="<p ng-repeat='user in customerInfo'>{{user.name}}</p>\
";


return {
restrict: 'E',
scope: {
    customerInfo: '=info'
  },   
template : htmlcode
};
});

我的 html 代碼：

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<body ng-app="myApp">
<div ng-controller="myCtrl">

<app-customer info="users"></app-customer>

</div>


</body>
</html>


<script src="angularapp.js"></script>

我只想訪問我的指令中的 $scope.users ，打印用戶 object 而不使用 ng-repeat，所以我這樣做了：

var app = angular.module("myApp", []);

app.controller('myCtrl', function($scope) {

$scope.users=[
{name:'davidi',age:'23'},
{name:'karen',age:'43'},
{name:'lior',age:'22'}
];

});


app.directive("appCustomer", function() {

var htmlcode="";
var userslength=3;


for(var i=0;i<userslength;i++)
{
    htmlcode=htmlcode+"<p>{{users["+i+"]['name']}}</p>";
}

return {
restrict: 'E', 
template : htmlcode
};
});

這很好用，但是當我將userlength替換為$scope.users.length時，應用程序失敗。 所以我的問題是如何從指令中的 controller 訪問 $scope？

JSFiddle

Answer 1

您需要指定link function

 app.directive("appCustomer", function() { function link(scope, element, attrs) { var htmlcode = ""; for (var i = 0; i < scope.users.length; i++) { element.text(Put your text here); // OR element.html(Put your HTML here); } } return { restrict: 'E', users: '=', link: link }; });

在 scope 中，您將收到users array

第二個是您可以使用元素參數將數據放入模板。 或者單獨創建html模板

如何使用 angularjs 將 $scope 變量從 controller 傳遞給指令

問題描述

1 個解決方案

解決方案1
0 已采納 2020-10-25 09:37:09

如何使用 angularjs 將 $scope 變量從 controller 傳遞給指令

問題描述

1 個解決方案

解決方案1 0 已采納 2020-10-25 09:37:09

解決方案1
0 已采納 2020-10-25 09:37:09