Question

我有来自divs的下拉列表。这不是我做的，是来自外部机构。但这并不重要。带下拉列表的div看起来像这样：

<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会添加名为value的隐藏字段属性，并将选择的文本插入该值。正如你所看到的，我对隐藏的inputu有一个指令，看起来像这样（经过多次搜索，以及所有内容）：

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

}）;

问题在于，当我正在观察没有任何事情发生时，虽然在使用chrome进行调试时可以看到变化，但是值得观察不到。顺便说说。我正在尝试对此dropdowwn进行验证。我的想法是检查这个值是否已填满，并告诉用户填写下拉列表，通过添加一个类来标记这个东西是红色的。那是这样做的吗？

更新我忘了添加，我认为使用上述外部javascript完成该div上的click事件也很重要。我在下面粘贴它。我已将外部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

只需使用插值＆amp; 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

我不确定你做事的方式是最好的方法，但我知道为什么你的手表没有做任何事情。

for(unsigned char d = 0; d < 128; d++){ printf("%c", d); //IF REMOVED #if 0 --> RUNTIME ERROR }需要一个函数或一个表达式。

如果传递一个函数，它会在每个摘要循环中调用，其结果是传递给更改侦听器的值。

如果传递表达式，则会对范围进行评估，评估结果是传递给更改侦听器的值。

所以你真正需要的是：

$scope.$watch()

如何使用Angular观察隐藏字段的更改？

2 个答案: