AngularJS caixa de seleção comportamento estranho

Question

alguns amigos e eu estamos trabalhando em um projeto.Este é o segundo projeto em que estou trabalhando com AngularJS, estão usando a versão 1.2.3.

Apesar de que eu, às vezes, encontrar alguns de seu comportamento estranho, e não entendo por que algo está acontecendo.

Então a situação é essa...Eu tenho no meu arquivo cshtml followig:

<div class="checkbox">
    <label>
         <input name="somecheckbox" type="checkbox" ng-click="click()" ng-model="displayRegardlessOfSomething" />
         <label>Display regardless of something</label>
    </label>
</div>

<h1>{{displayRegardlessOfSomething}}</h1>

No meu arquivo javascript eu tenho o seguinte código dentro de uma directiva:

No início:

$scope.displayRegardlessOfSomething = true;

E eu tenho o seguinte:

$scope.click = function () {
    console.log($scope.displayRegardlessOfSomething)
}

E sempre que eu marque ou desmarque a caixa de seleção sempre recebo verdadeiro...No entanto, o peculiar é que o conteúdo dentro do <h1></h1> tags alterações....Então, é como eu estou mudando o valor de uma variável em html camada, mas não no JavaScript camada...

Por que isso está acontecendo?

Eu resolvi o problema usando $pai.displayRegardlessOfSomething mas eu não entendo por que resolveu o problema...o que causou o problema em primeiro lugar?

Answer 1

Eu tentei o que você fez no violino e ele funciona muito bem para mim.

http://jsfiddle.net/nicolasmoise/X9KYU/1/

O fato de que ele funciona para você quando você usou $parent me faz pensar em um controlador principal é a culpa aqui.Talvez você tenha duas variáveis com os mesmos nomes?

P. S.:lembre-se que em Javascript, primitivos são passados por valor, e os objetos são passados por referência.Esta é a causa de muitos erros Angular desenvolvedores.Veja este violino onde eu ilustrar o meu ponto.

com primitivos: http://jsfiddle.net/nicolasmoise/X9KYU/

com objetos: http://jsfiddle.net/nicolasmoise/X9KYU/2/

Answer 2

A menos que você é a certeza de que tudo está vivendo no mesmo âmbito, o que é quase nunca, você deve sempre tem um ponto em algum lugar no seu ng-modelo de expressão.

myApp.controller('MyController2', function($scope) {

  $scope.model = { displayRegardlessOfSomething: true };

  $scope.click = function() {
    console.log($scope.model.displayRegardlessOfSomething);
  };
});

<input type="checkbox" 
       ng-click="click()" 
       ng-model="model.displayRegardlessOfSomething" />

Ver este plunker para obter detalhes para demonstração ao vivo.