Estoy escribiendo una directiva en angularjs y obtengo el error mencionado anteriormente. Estoy usando el código de un libro.

.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}}'
   }}])

Me sale un error en

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

El código HTML

<div my-facebook></div>
<h1> My Friend's Birthday Reminder</h1>
<div ng-repeat="friend in myFriends">
     {{friend.name}}
</div>
47
harshit 2 sep. 2014 a las 20:02

6 respuestas

La mejor respuesta

El problema es que no está definiendo el atributo friends en el elemento directivo <div my-facebook></div>.

Cuando define el alcance de la directiva de esta manera:

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

Básicamente estás diciendo:

  • Enlace a la propiedad permissions del ámbito local el valor del atributo DOM con el mismo nombre
  • Configure el enlace bidireccional entre la propiedad myFriends del ámbito local y la propiedad friends del ámbito primario

Como no está definiendo el atributo friends en el DOM, Angular no puede crear el enlace bidireccional y arroja el error. Más información aquí.

Defina el atributo friends en su DOM y debería solucionar el problema:

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

Y, por ejemplo, en el controlador:

app.controller('Ctrl', function($scope) {
  $scope.friendList = [];
});
73
bmleite 3 sep. 2014 a las 09:49

Si lo está utilizando como un enlace unidireccional, simplemente defina el alcance adecuadamente:

scope: {
   example: '<'
}

En mi caso, estaba usando un enlace bidireccional como enlace unidireccional, pasando objetos en línea como estos:

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

Mi caso fue especial porque (a propósito) destruí objetos y, por lo tanto, rompí sus enlaces, pero si solo necesita un enlace unidireccional, defínalo de esa manera.

0
Omer Leshem 6 nov. 2019 a las 22:47

Mi solución fue más difícil de encontrar aquí, pero más fácil de implementar. Tuve que cambiarlo al equivalente de (tenga en cuenta que el signo de interrogación hace que el atributo sea opcional. Antes de 1.5 aparentemente no era necesario).

scope: {
    permissions: '@',
    myFriends: '=?friends'
}
77
Aziz 26 feb. 2016 a las 17:25

Tuve esto porque intenté actualizar otra variable en el alcance de mi directiva pero no la pasé en html a pesar de que está calculada y no debería pasarse en html

Aquí hay un ejemplo de alcance directivo

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

En esa directiva, puedo pasarle var1 o var2 pero no ambas y la lógica de la directiva encontrará el valor de la otra var

Ese error me sucedió cuando llamé a la directiva con var1 y actualicé var2 en el código

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

Para superar este problema, llame a la directiva con todas las variables de alcance que desea actualizar, incluso con valores sin significado en mi ejemplo

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

Espero que esto te ayude

0
Basheer AL-MOMANI 4 feb. 2019 a las 12:43

No es una respuesta directa a la pregunta de los OP, pero esto me sucedió a mí, así que para cualquier otra persona que pueda Google este error en el futuro. Esto es similar a la respuesta de JohnP.

Este error también puede aparecer si tiene un atributo camelCase en su directiva.

Entonces si tienes:

<div my-facebook myFriends></div>

Lanzará el error.

Esto se debe a que (tomado de la documentación angular):

Angular normaliza la etiqueta de un elemento y el nombre del atributo para determinar qué elementos coinciden con qué directivas. Normalmente nos referimos a las directivas por su nombre normalizado de camelCase sensible a mayúsculas y minúsculas (por ejemplo, ngModel). Sin embargo, dado que HTML no distingue entre mayúsculas y minúsculas, nos referimos a las directivas en el DOM mediante formas en minúsculas, que generalmente usan atributos delimitados por guiones en los elementos DOM (por ejemplo, ng-model).

El proceso de normalización es el siguiente:

Tira x- y data- desde el frente del elemento / atributos.

Convierta el :, - o _ - nombre delimitado a camelCase.

Entonces <div my-facebook myFriends></div>

Deberá convertirse en <div my-facebook my-friends></div>

19
Matt Lishman 16 jun. 2016 a las 07:27

Me encuentro con este mismo problema y para mí el problema eran los caracteres en mayúscula en el nombre DOM.

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

No funcionó, pero

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

Trabajó. Pasé un día trabajando en esto y encontré la solución por accidente.

4
JohnP 9 jun. 2015 a las 10:40