오류: [$compile:nonassign] 지시문 'myFacebook'과 함께 사용되는 표현식 'undefined'는 할당할 수 없습니다.

오류: [$compile:nonassign] 지시문 'myFacebook'과 함께 사용되는 표현식 'undefined'는 할당할 수 없습니다.

angularjs로 지시문을 작성 중인데 위의 오류가 발생합니다.나는 책의 코드를 사용하고 있다.

.directive('myFacebook', [function(){
return {
    link: function(scope,element,attributes) {
        (function(d) {
                var js, id = 'facebook-jssdk',
                    ref = d.getElementsByTagName('script')[0];
                if (d.getElementById(id)) {
                    return;

                }
                js = d.createElement('script');
                js.id = id;
                js.async = true;
                js.src = "//connect.facebook.net/en_US/all.js";
                ref.parentNode.insertBefore(js, ref);
            }(document));
            // Initialize FB
            window.fbAsyncInit = function() {
                FB.init({

                    appId: 'xxxx', //birthday reminder
                    status: true, // check login status
                    cookie: true, // enable cookies to access the session
                    xfbml: false // parse XFBML
                });
                //Check FB Status
                FB.getLoginStatus(function(response) {
                     xxxx
                });
            };
        scope.username='';
    },
    scope: {
            permissions: '@',
            myFriends: '=friends'
        },
    controller: function($scope) {
        $scope.loadFriends = function() {
            FB.api('/me/friends?fields=birthday,name,picture', function(response) {
                    $scope.$apply(function() {
                        $scope.myFriends = response.data;
                    });
                });
        }
    },

    template:'Welcome {{username}}'
   }}])

에러가 나다

 $scope.$apply(function() {
            $scope.myFriends = response.data;
 });

HTML 코드

<div my-facebook></div>
<h1> My Friend's Birthday Reminder</h1>
<div ng-repeat="friend in myFriends">
     {{friend.name}}
</div>

여기서 솔루션을 찾는 것은 더 어려웠지만 구현은 더 쉬웠습니다.(물음표는 Atribute를 옵션인 것에 주의해 주세요)와 같은 값으로 변경해야 합니다.1.5 이전 버전에서는 이 기능이 필요하지 않았던 것 같습니다).

scope: {
    permissions: '@',
    myFriends: '=?friends'
}

는 Attribute의 의 Atribute의 Atribute의 하고 있지 않다는 것입니다.friends<div my-facebook></div>.

디렉티브의 범위를 다음과 같이 정의할 경우:

scope: {
    permissions: '@',
    myFriends: '=friends'
}

기본적으로 다음과 같습니다.

• 스코프의 에 .permissions 값
• 스코프의 합니다.myFriends 및 의 " " " "friends

의 Atribute를 하고 않기 friendsDOM에서 Angular는 양방향 바인딩을 생성할 수 없으며 오류를 발생시킵니다.자세한 내용은 이쪽.

「」의 정의」friends을 사용하다

<div my-facebook friends="friendList"></div>

예를 들어 컨트롤러에서는 다음과 같습니다.

app.controller('Ctrl', function($scope) {
  $scope.friendList = [];
});

OPs 질문에 대한 직접적인 답변은 아니지만, 이것은 저에게 일어난 일이기 때문에 앞으로 구글에서 이 오류를 찾을 수 있는 다른 사람을 위해서입니다.이것은 JohnP의 답변과 유사합니다.

디렉티브에 camelCase 속성이 있는 경우에도 이 오류가 발생할 수 있습니다.

다음과 같은 경우:

<div my-facebook myFriends></div>

에러가 발생합니다.

그 이유는 (각도 설명서에서 취합한) 다음과 같습니다.

각도는 요소의 태그와 속성 이름을 정규화하여 어떤 요소가 지시와 일치하는지 결정합니다.일반적으로 명령어는 대소문자를 구분하는 camelCase 정규화된 이름(ngModel 등)으로 나타냅니다.그러나 HTML은 대소문자를 구분하지 않기 때문에 일반적으로 DOM 요소(예: ng-model)에서 대시 구분 속성을 사용하여 DOM의 지시어를 소문자로 나타냅니다.

정규화 프로세스는 다음과 같습니다.

x- ★★★★★★★★★★★★★★★★★」data-요소/속성 전면에서 확인할 수 있습니다.

:,- , 「」_ Case camel Case로 .

<div my-facebook myFriends></div>

가 될 필요가 있다<div my-facebook my-friends></div>

같은 문제로 진행했는데, 문제는 DOM 이름의 대문자였습니다.

<div my-facebook FRIENDS="friendList"></div>

동작은 하지 않았지만

<div my-facebook friends="friendList"></div>

효과가 있었어요. 하루 종일 이걸 연구하다가 우연히 해결책을 찾았어요.

디렉티브 범위 내의 다른 변수를 업데이트하려고 했지만 계산되어 html로 전달되지 않아 html로 전달되지 않았습니다.

다음은 지시 범위의 예입니다.

scope: {
  var1: '=',
  var2: '='
}

그 지시에서 나는 var1이나 var2에 전달할 수 있지만 둘 다 할 수 없으며 지시 로직은 다른 var의 값을 찾을 것이다.

var1을 사용하여 디렉티브를 호출하고 코드의 var2를 업데이트 했을 때 오류가 발생했습니다.

<pb-my-directive  var1="something"></my-directive>

이 문제를 해결하려면 내 예에서 의미 없는 값을 사용하더라도 업데이트할 모든 범위 변수를 사용하여 디렉티브를 호출합니다.

<pb-my-directive  var1="something" var2="false"></my-directive>

이것이 너에게 도움이 되길 바란다.

단방향 바인딩으로 사용하는 경우 범위를 적절하게 정의하기만 하면 됩니다.

scope: {
   example: '<'
}

이 경우 단방향 바인딩으로 양방향 바인딩을 사용하여 다음과 같은 인라인 개체를 전달했습니다.

<directive bindings="{key: value}"></directive>

제가 (의도적으로) 오브젝트를 파괴하고 바인딩을 끊었기 때문에 특별한 케이스였습니다만, 단방향 바인딩만 필요한 경우에는 그렇게 정의해 주세요.

언급URL : https://stackoverflow.com/questions/25627683/error-compilenonassign-expression-undefined-used-with-directive-myfacebo