컨트롤러 데이터가 지시문에 전달되지 않았습니다.

각도를 찾기 시작했는데 왜 내 데이터가 내 지시문에 전달되지 않는지 알 수 없습니다. https://plnkr.co/edit/ONwYevQ4NbvBVjTwARHl?p=preview이컨트롤러 데이터가 지시문에 전달되지 않았습니다.

내 코드 : app.js는 :

이

var app = angular.module('mjApp', []); 

app.controller('MainController', ['$scope', '$http', function ($scope, $http) { 
    $scope.name = "m.jacionis"; 
    $scope.avatar = null; 
    $scope.fetchData = function(){ 
    var callUrl = 'https://api.github.com/search/users?q=' + $scope.name; 
    $scope.avatar = "http://images.clipartpanda.com/sad-face-clipart-black-and-white-9c4eqRyyi.png"; 

    $http({ 
     method: 'GET', 
     url: callUrl 
    }).then(function successCallback(response) { 
     $scope.avatar = response.data.items.length > 0 ? 
     response.data.items[0].avatar_url : $scope.avatar; 
     console.log($scope.avatar); 
    }, function errorCallback(response) { 
     console.log('avatar stays the same'); 
    }); 
    }; 
}]); 

app.directive("mjDirective", function(){ 
    return { 
    restrict: "EA", 
    templateUrl: 'template.html', 
    scope: { 
     name: "=name", 
     avatar: "=avatar" 
    } 
    }; 
});

index.html을 :

이

<!DOCTYPE html> 
<html ng-app="mjApp"> 

    <head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script> 
    <script src="app.js"></script> 
    </head> 

    <body> 
    <div class="parent" ng-controller="MainController"> 
     <div class="line"> 
     <input type='text' ng-model='name' /> 
     <input type="button" ng-click="fetchData()" value="Submit User Name" /> 
     </div> 
     <mj-directive name=name userAvatar=userAvatar></mj-directive> 
    </div> 
    </body> 

</html>

template.html :

<div class='line'> 
    <p>Name : <strong>{{name}}</strong></p> 
    <img class="avatar" src={{avatar}}/> 
</div>

name 값이 여기 코드가 통과했지만, 내가 가져올 때 얻을 수있는 값 avatar 데이터가 아닙니다. 알아낼 수없는 것, 왜 그렇게 느껴지나요? 어떤 아이디어 나 제안이 많은 도움이 될 것입니다.

출처

2016-09-21 Mindaugas Jačionis

'아바타 :

<mj-directive name="name" userAvatar="userAvatar"></mj-directive>

또한 지시자 안에 당신이해야 "= 아바타"'그러나 당신이 전달하는'userAvatar' – taguenizy

난 당신이 avatar

당신의 바인딩, 그래서

scope: { 
     name: "=name", 
     avatar: "=avatar" 
    }

를 바인더 제본하기 때문에 당신이 잘못된 이름 userAvatar 대신 avatar을 촬영 한 생각, 당신은 지시어에 이름과 아바타을해야합니다.

<body> 
    <div class="parent" ng-controller="MainController"> 
     <div class="line"> 
     <input type='text' ng-model='name' /> 
     <input type="button" ng-click="fetchData()" value="Submit User Name" /> 
     </div> 
     <mj-directive name=name avatar=avatar></mj-directive> 
    </div> 
    </body>

변경 지시,

<mj-directive name=name avatar=avatar></mj-directive>

출처

2016-09-21 13:20:26 Sravan

안녕하세요, 당신이 봤어? – Sravan

난 당신이 포장 할 생각 name 문자열에 avatar 당신이 HTML에서 사용.

scope: { 
    user: "=name" 
    avatar: "=userAvatar" 
}

출처

2016-09-21 13:23:32

컨트롤러 데이터가 지시문에 전달되지 않았습니다.

답변

관련 문제