Question

I have the following
Rails HAML:

 = select_tag "some-class",
                        options_for_select([['None', '']], ''),
                        { class: 'some-other-class',
                          'ng-model' => 'someModel',
                          'ng-options' => 'option.name for option in someList',
                          'ng-change' => 'updateSelected()'}

Angular Controller:

  scope.updateSelected = ->
       #logic for updating model lives here. Model updates successfully by using some values defined within scope. Includes the following:
       scope.someModel = "some_new_value"

Angular Directive:

  SomeClassDirective= ->
       restrict: 'C'

       link: (scope, element, attrs) ->

            monitorFormFields = (newValue, oldValue) ->
                   console.log "this is the inner function call"
                   #logic for setting the inner _destroy field lives here

            scope.$watch 'someModel', monitorFormFields

However, when the Select List value is changed, ‘this is the inner function call’ never prints.(it does print when the directive first initializes, ie at page load). My question therefore is: Why isn’t the $watch expression triggering, and how do I get it to trigger?

Thanks!

Answer 1

With this HTML:

<select class="some-class" ng-model="someModel" 
   ng-options="option.name for option in someList"></select>

Here is a directive that will watch for a change to someModel:

myApp.directive('someClass', function () {
  return {
    restrict: 'C',
    link: function (scope, element, attrs) {
      var monitorFormFields = function (newValue, oldValue) {
        console.log("this is in the inner function call");
      }
      scope.$watch('someModel', monitorFormFields);
    }
  }
});

Controller:

$scope.someList = [{ name: 'name1' }, { name: 'name2' }];

Note that you don’t need to call a controller method to update someModel — Angular does that automatically for us because of the ng-model attribute. So, the directive only needs to $watch for a change to that $scope property.

Fiddle.

---

I would like to from the element fetch a sibling with [_destroy] in the name and set it to either “0” or “1” depending on the value of the select box.

A more Angular approach would be to have model properties control whether “0” or “1” is displayed. E.g., in your controller:

$scope.destroy1 = "0";
$scope.destroy2 = "0";

In your HTML:

<div>{{destroy1}}</div>
<div>{{destroy2}}</div>

In monitorFormFields() you can change the values of these scope properties, and the view will automatically update — there is no need to “find” siblings or update .val()ues.