Qual é a diferença entre o escopo: {} e o escopo: true dentro da diretiva?

Não consigo encontrar essas informações sobre Angular.js e percebo enquanto estava trabalhando que esses dois valores funcionam de maneira diferente. Qual é a diferença?

.directive('foo', function() { return { scope: true }; }); .directive('foo', function() { return { scope: {} }; }); 

O scope: true e scope:{} criará um escopo filho para a diretiva. Mas,

scope:true irá herdar prototipicamente as propriedades do pai (digamos, o controlador onde a diretiva está), onde como scope:{} não herdará as propriedades do pai e, portanto, chamadas de isolated

Por exemplo, vamos dizer que temos um controlador c1 e duas diretivas d1 e d2,

 app.controller('c1', function($scope){ $scope.prop = "some value"; }); .directive('d1', function() { return { scope: true }; }); .directive('d2', function() { return { scope: {} }; }); 

d1 (scope: true) terá access ao escopo c1 -> prop onde d2 é isolado do escopo c1.

Nota 1: Tanto d1 como d2 criarão um novo escopo para cada diretiva definida.

Nota 2: Além da diferença entre os dois, para scope:true – Quaisquer alterações feitas no novo escopo filho não refletirão o escopo pai. No entanto, como o novo escopo é herdado do escopo pai, todas as alterações feitas no escopo c1 (o escopo pai) serão refletidas no escopo da diretiva.

Dica: use o scope:{} ou isolated scope para diretivas angulares reutilizáveis. Para que você não acabe mexendo com as propriedades do escopo pai

escopo: “true”

O Angular JS criará um novo escopo herdando o escopo pai (geralmente o escopo do controlador, o escopo raiz do aplicativo).

Nota: Quaisquer alterações feitas nesse novo escopo não refletirão o escopo pai. No entanto, como o novo escopo é herdado do escopo pai, quaisquer alterações feitas no controlador-pai, ou seja, no controlador, serão refletidas no escopo da diretiva.

escopo: “falso”

O controlador e a diretiva estão usando o mesmo object de escopo. Isso significa que quaisquer alterações no controlador ou na diretiva estarão em sincronia.

escopo : “{}”

Novo escopo criado para a diretiva, mas não será herdado do escopo pai. Esse novo escopo também conhecido como escopo isolado, porque é completamente desanexado de seu escopo pai.

scope: true cria um novo escopo para a diretiva que herda tudo dos pais

scope: {} também cria um novo escopo para a diretiva, mas é isolado, por isso não herda nada dos pais

Dê uma olhada neste artigo:

http://www.undefinednull.com/2014/02/11/mastering-the-scope-of-a-directive-in-angularjs/

scope: true cria um escopo que não é isolado do escopo pais, herda do escopo pais, enquanto scope: {} cria um escopo isolado do pai.

A declaração ‘scope’ em uma diretiva AngularJS é uma propriedade do ‘Directive Definition Object’, que é o que está sendo retornado pela function diretiva que você define. As opções para ‘escopo’ estão documentadas na documentação angular oficial para um Objeto de Definição Diretiva:

https://docs.angularjs.org/api/ng/service/$compile#directive-definition-object

Aqui está a explicação retirada diretamente da documentação:

escopo

A propriedade scope pode ser falsa, verdadeira ou um object:

false (padrão): Nenhum escopo será criado para a diretiva. A diretiva usará o escopo de seus pais.

true : um novo escopo filho que herdará protótipo de seu pai será criado para o elemento da diretiva. Se várias diretivas no mesmo elemento solicitarem um novo escopo, apenas um novo escopo será criado.

{…} (um hash de object): um novo escopo “isolado” é criado para o modelo da diretiva. O escopo ‘isolar’ difere do escopo normal, pois não herda prototipicamente de seu escopo pai. Isso é útil ao criar componentes reutilizáveis, que não devem ler ou modificar acidentalmente dados no escopo pai. Observe que uma diretiva de escopo de isolamento sem um modelo ou templateUrl não aplicará o escopo de isolamento a seus elementos filhos.