...
| Âncora | ||||
|---|---|---|---|---|
|
O que é um Scope?
...
É um link entre partials e controllers, onde tudo que declaramos em scopes é exposto para ser utilizado em partials, por directives. Contudo, scopes possuem outras funcionalidades, como por exemplo a função $watch que fornece ao desenvolvedor uma forma de observer valores contidos no scope e realizar ações conforme a interação do usuário com a UI.
Exemplo de código onde uma variável declarada em um escopo do controller PeriodCtrl é exposta para a directive ng-options.
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
<!-- ... -->
<select class="select field-short" ng-model="model.enabled" tl-key="enabled" ng-options="key.bool() as value for (key, value) in view.status">
<option value=""></option>
</select>
<!-- ... --> |
| Bloco de código | ||||||||
|---|---|---|---|---|---|---|---|---|
| ||||||||
shieldApp.controller( 'PeriodCtrl', ['$scope', '$http', '$property', '$resourceLocator', '$dialog', function ( $scope, $http, $property, $resourceLocator, $dialog ) {
// ...
$scope.view = {
// ...
status: $property.range({object: 'period', attribute: 'enabled'}),
// ...
};
// ...
}]); |
No exemplo acima, acessamos o scope do controller PeriodCtrl através de injeção de dependencias no construtor do controller (variável declarada como $scope). Valores são expostos para partials e directives através do operator . (dot). No exemplo, um objeto de nome view é criado no scope, e internamente este objeto possui um atributo status. A partir daí, a partial pode referenciar o objeto status através da atributo view do scope; como vemos na delcaração view.status.
| Informações | ||
|---|---|---|
| ||
Acesse o código-fonte do partial period-list.html e do controller |
| Informações |
|---|
Não deixe de ler a documentação oficial, scopes possui muitas funcionalidades como: prototypal inheretance, listeners, observers, data-biding, etc. |
Estrutura
Conforme a imagem abaixo, o projeto é estruturado por pastas, cada qual refletindo a responsabilidade de seus componentes. Como este projeto é inteiramente composto de arquivos Javascript, não existem dependencias de outros projetos.
...