Угловая переменная диапазона JS зависит от другой переменной области и не обновляется

Question

У меня есть директива с переменными области видимости, которые зависят от других переменных сферы. Я ожидал бы, что если переменная области с правой стороны уравнения изменится, она обновит левый, но это, похоже, не происходит.

В приведенном ниже примере при запуске selectProduct() он должен обновлять информацию о продукте, включая название продукта, но он не работает, если я не обновляю scope.title напрямую, как в прокомментированной строке внизу функции.

controller:function($scope){ 
     $scope.products = $scope.productGroup.products; 

     $scope.selected_product = $scope.productGroup.products[$scope.productGroup.selected_product]; 
     $scope.title = _.isEmpty($scope.selected_product) ? $scope.productGroup.title : $scope.selected_product.title; 
     $scope.excerpt = _.isEmpty($scope.selected_product) ? $scope.productGroup.excerpt : $scope.selected_product.excerpt; 
     $scope.description = _.isEmpty($scope.selected_product) ? $scope.productGroup.description : $scope.selected_product.description; 

     $scope.selectProduct = function(){ 
      $scope.selected_product = $scope.productGroup.products[1]; 
      console.log($scope.selected_product); 
      //$scope.title = $scope.selected_product.title; 
     } 
    }, 

Answer 1

В шаблоне просто связываются с {{ selected_product.title }} вместо установки $scope.title = $scope.selected_product.title и привязки к {{ title }}.

Как правило, не используйте в качестве своей модели $scope. Даже не как ваш ViewModel. Проистопольное наследование JavaScript и система переменных ссылок делают так, что Angular действительно не соответствует традиционному шаблону MVVM, где $scope будет вашим ViewModel.

Не имея рабочего примера вашей проблемы, я хотел бы попытаться сделать снимок в темноте и предложить вам реорганизовать ваш код на что-то подобное.

controller:function($scope){ 
    $scope.products = $scope.productGroup.products; 
    $scope.selected_product = $scope.products[$scope.productGroup.selected_product] || { 
     title: $scope.productGroup.title, 
     excerpt: $scope.productGroup.excerpt, 
     description: $scope.productGroup.description 
    }; 

    $scope.selectProduct = function(){ 
     $scope.selected_product = $scope.productGroup.products[1]; 
    } 
}, 

Обязательно прочитайте эту для получения дополнительной информации: фон

What are the nuances of scope prototypal/prototypical inheritance in AngularJS?

Вашей проблема на самом деле не совсем, кажется, связана с прототипным наследованием вещи, но все же не забудьте прочитать и понимать это. Насколько я вижу, в вашем коде реальная проблема заключается в том, что вы устанавливаете $scope.title один раз, а затем ожидаете, что он изменится в соответствии с изменениями на $scope.selected_product автоматически, но зачем это нужно? Между этими двумя не существует волшебной связи. Однако, если вы реорганизуете свой код на тот, который я предоставил, вы не только получите привязки к работе, но и получите выгоду от того, что у вас осталось меньше дубликатов _.isEmpty() чеков (что я сомневаюсь, что вам нужно в первую очередь на самом деле ;-))