Question

在我的角度应用程序中，我有一个模型对象'selectedDcName' 此模型的值与下拉选择中的选择相关联我正在努力关注价值变化，我需要知道新价值究竟是什么。

如何正确地做到这一点？

这是我的html标记：

 <isteven-multi-select
                                        input-model="dcNames"
                                        output-model="selectedDcName"
                                        button-label="icon name"
                                        item-label="icon name maker"
                                        tick-property="ticked"
                                        selection-mode="single"
                                        >
                                </isteven-multi-select>

这是控制器：

$scope.selectedDcName='';

        $scope.$watch('selectedDcName', function(name) {
            console.log('new selectedDcName value: ' + name);
        });

与我的期望相反，“名字”中没有任何内容。

我该如何正确地做到这一点？

Answer 1

http://codepen.io/nicholasabrams/pen/gpmBqd

这是我为同一目的而编写的代码。它将所有职责分成一个服务，一个数据控制器和一个dom操作指令。

看看有多简单！：

;(function AngularSelectbox() {
  "use strict";
  var SelectBox = angular.module('selectbox', []);
  SelectBox.service('SelectboxUtils', function() {
    this.getStates = function() {
      var statesOpts = {
        // $http.post(..., function())...
        "options": ['Florida', 'Georgia', 'Alabama', 'New York'],
      };
      return statesOpts;
    };
  }).controller('statesDataCtrl', function($scope, SelectboxUtils) {
      $scope.selectbox = {};
      $scope.selectbox.optionsVisible = false;
      $scope.selectbox.selectorSrc = 'http://placehold.it/20x20/';
      $scope.selectbox.options = SelectboxUtils.getStates().options;
      $scope.selectbox.placeholder = 'Please make a selection';
      $scope.selectbox.selected = $scope.selectbox.placeholder; // Always will pull the first option as the default
  }).directive('selectbox', function() {
    return {
      restrict: 'A',
      link: function($scope, elm) {
        $scope.activateSelection = function(selection, index) {
          $scope.selectbox.selected = selection;
          $scope.selectbox.selectedIndex = index;
        };
        $scope.toggleOpts = function() {
          $scope.selectbox.optionsVisible = !$scope.selectbox.optionsVisible;
        };
      }
    };
  });
})();

Answer 2

以下是我最终解决这个问题的方法：

$scope.$watch(function(scope) {return  $scope.selectedDcName },
        function(newValue, oldValue) {
            if(newValue[0]){
            console.log('new value:  ' + newValue[0].name);
        }

        if(newValue[0]){
            $scope.$parent.selectedName = newValue[0].name;
        }

    }
);

如何捕获$ scope的$ scope模型对象的值

2 个答案: