如何使用Angular觀看隱藏字段的變化？

Question

我有從divs下拉。這不是我做的，來自外部機構。但這並不重要。有一個下拉的股利如下：

<label class='label-block' for='kraj-dokument'>Kraj wydania dokumentu tożsamości *</label> 
        <input type='hidden' name='kraj-dokument' id='kraj-dokument' value="" drop-down-validation-directive /> <div class="select kraj-dokument" data-destination="kraj-dokument"> 
         <p class="label">Wybierz z listy</p> 
         <div class="options"> 
          <p class="option" data-ng-repeat="country in countries">{{country.Name}}</p> 
         </div> 
        </div> 

當您在此下拉外部JavaScript中添加個隱藏字段屬性，叫做值點擊選擇，並將其插入從的choise到該值的文本。正如你可以看到我有隱藏的inputu它看起來像這樣的指令（經過多次搜索，和一切）：

myapp.directive("dropDownValidationDirective", function() { 
return function(scope, elem, attr, ctrl) { 
    scope.$watch(attr['value'], function(nv) { 
      elem.val(nv); 
     } 
     ); 
} 

}）;

問題是，當我正在做手錶什麼都沒有發生，價值沒有geting觀看，雖然當在鉻中調試時看到的變化。順便一提。我正在嘗試對此dropdowwn進行驗證。我的想法是檢查這個值是否被填充，並告訴用戶通過添加一個類來填充下拉菜單，這標誌着這個事情是紅色的。這是做到這一點的方式嗎？

UPDATE我忘了添加，我認爲這也是重要的，該div上的點擊事件是與提到的外部JavaScript完成。我在下面粘貼它。我已經把外部JavaScript功能到服務：

myApp.service('DropDownService', function() { 
this.renderDropDown = function() { 
    function initEvents() { 
     var selectClicked = $(".selectClicked"); 
     $(".select").each(function() { 
      var destination = $(this).attr("data-destination"); 
      var option = $(this).find(".option"); 
      var options = $(this).find(".options"); 
      var label = $(this).find(".label"); 
      var select = $(this); 

      label.click(function() { 
       if (label.hasClass("clicked")) { 
        $(".select .options").hide(); 
        $(".select .label").removeClass("clicked"); 
        $(".select").removeClass("clicked"); 
        selectClicked.removeClass("clicked"); 
       } else { 
        $(".select .label").removeClass("clicked"); 
        $(".select").removeClass("clicked"); 
        label.addClass("clicked"); 
        select.addClass("clicked"); 
        selectClicked.addClass("clicked"); 
        $(".select .options").hide(); 
        options.show(); 
       } 
      }); 

      option.unbind("click").bind("click", function() { 
       $("#" + destination).attr("value", $(this).text()); 
       label.text($(this).text()); 
       options.hide();      
       $(".select .label").removeClass("clicked"); 
       $(".select").removeClass("clicked"); 
       $(".select").removeClass("error"); 
       selectClicked.removeClass("clicked"); 
      }); 
     }); 
    } 

    angular.element(document).ready(function() { 

     initEvents(); 


     if (navigator.appVersion.indexOf("Mac") !== -1) { 
      $('body').addClass("MacOS"); 
     } 

    }); 
} 

Answer 1

只需使用插值& ATTRS $觀察，而不是：

HTML：

<div ng-controller="AppController"> 
    <label class="label-block" for="kraj-dokument">Kraj wydania dokumentu tożsamości *</label> 
    <input type="hidden" name="kraj-dokument" id="kraj-dokument" value="{{ TotalPrice }}" drop-down-validation-directive /> 
    <div class="select kraj-dokument" data-destination="kraj-dokument" ng-click="AddItem()"> 
     Click to change and see console output 
    </div> 
</div> 

JS：

var app = angular.module('my-app', [], function() {}) 
app.controller('AppController', function($scope) { 
    $scope.Quantity = 0; 
    $scope.TotalPrice = 0; 
    $scope.Price = 100; 
    $scope.AddItem = function() { 
     $scope.Quantity++; 
     $scope.TotalPrice = $scope.Price * $scope.Quantity; 
    }; 
}); 
app.directive("dropDownValidationDirective", function() { 
    return { 
     link: function(scope, elem, attrs, ctrl) { 
      attrs.$observe('value', function(nv) { 
       console.log(nv); 
      }); 
     } 
    } 
}); 

工作示例：http://jsfiddle.net/ghd9c8q3/56/

Answer 2

我不確定你做事情的方式是最好的方式，但我知道你的手錶爲什麼不做任何事情。

$scope.$watch()需要一個函數或表達式。

如果傳遞一個函數，它會在每個摘要循環中調用，並且其結果是傳遞給更改偵聽器的值。

如果您傳遞一個表達式，它將在範圍上進行評估，並且評估的結果是傳遞給更改偵聽器的值。

所以你實際上需要的是：

scope.$watch(function() { 
    return attr['value']; 
}, function(nv) { 
    elem.val(nv); 
});