![](/img/trans.png)
[英]angularjs access $scope of Controller from directive using $eval
[英]Not able to access scope from directive of controller in AngularJS
我是新來AngularJS,我已經使用服務來獲得從后端數據並在控制器接收到它,現在我必須分析這些值與動態創建的指令元素,當我試圖這樣做,我收到undefined
的價值觀控制器。
app.js:
var app = angular.module('childAid', ["myDirectives"]);
app.controller('headerController', function($scope, headerFactory) {
debugger
headerFactory.getAllChallenges()
.then(function(data) {
$scope.challengeslist = data.header;
});
});
directiveExample.js
var myDirectives = angular.module('myDirectives', []);
myDirectives.directive('headerPicker', function() {
return {
restrict: 'AE',
templateUrl: 'component/views/header.html',
link: function($scope, element, attributes) {
console.log('linking foo ' + $scope.challengeslist);
}
};
});
serviceExample.js:(function(){
angular .module('childAid').factory('headerFactory', headerFactory);
function headerFactory($http) {
function getAllChallenges() {
debugger
return $http
.get('resources/stubs/details_tree.json')
.then(complete)
.catch(failed);
}
// helper function to handle the resolved promise
function complete(response) {
debugger
return response.data;
}
// helper function to handle the rejected promise
function failed(error) {
console.error(error.statusText);
}
return {
getAllChallenges: getAllChallenges
};
}
headerFactory.$inject = ['$http']; })();
index.html:
<div ng-app="childAid" ng-controller="headerController">
<div class="container">
<h2>Displaying Header</h2>
<header-picker></header-picker>
</div>
我不知道我在哪里做錯了,請幫助我剛接觸AngularJS。
您是否嘗試過在指令上使用隔離范圍。 如果您嘗試這樣的操作,對您來說可能會更容易。
顯然,我無權訪問您的api,因此我已使用公共虛擬api對其進行了嘲笑,因此您必須對其進行修改才能與您自己的服務器一起使用。
重要的位是..
return {
restrict: 'AE',
templateUrl: 'header.html',
scope: {
'challengesList' : '='
}
};
..在您的指令中,以及
<header-picker challenges-list='challengesList'></header-picker>
..在您的html中。
這是完整的參考。 希望你覺得它有用。 抱歉,如果您已經嘗試過此操作。
app.js
var app = angular.module('childAid', ["myDirectives"]);
app.controller('headerController', function($scope, headerFactory) {
debugger
headerFactory.getAllChallenges()
.then(function(response) {
$scope.data = response;
// $scope.challengesList = data.header;
// dummy response has a data.title property,
$scope.challengesList = response.data.title;
});
});
angular
.module('childAid')
.factory('headerFactory', headerFactory);
headerFactory.$inject = ['$http'];
function headerFactory($http) {
function getAllChallenges() {
debugger
// var url = 'resources/stubs/details_tree.json';
// dummy api for demo purposes, obviously delete this
// and uncomment your own url for your own app
var url = 'http://jsonplaceholder.typicode.com/posts/1';
return $http
.get(url)
.catch(failed);
}
// helper function to handle the rejected promise
function failed(error) {
console.error(error.statusText);
}
return {
getAllChallenges: getAllChallenges
};
}
var myDirectives = angular.module('myDirectives', []);
myDirectives.directive('headerPicker', function() {
return {
restrict: 'AE',
templateUrl: 'header.html',
scope: {
'challengesList' : '='
}
};
});
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.2/angular.js" data-semver="1.4.2"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-app="childAid" ng-controller="headerController">
<pre>{{data}}</pre>
<div class="container">
<h2>Displaying Header</h2>
<header-picker challenges-list='challengesList'></header-picker>
</div>
</div>
</body>
</html>
header.html
<p>challengeslist = {{challengesList}}</p>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.