从属选择元素的AngularJS指令

我正在尝试为从属选择元素编写指令。关系是Country > States > Cities。当country类的元素发生变化时，我应该使用states类更新元素，类中元素的相同行为。为了获得州我只需要国家编号和城市我需要国家和州编号。所以，我没有这样的代码：从属选择元素的AngularJS指令

app.directive('country', ['$http', function($http) { 
     return { 
      restrict: 'C', 
      link: function(scope, element, attrs) { 
       element.change(function() { 
        $http.get(Routing.generate('states') + '/' + element.val()).success(function(data) { 
         if (data.message) { 
          scope.message = data.message; 
         } else { 
          scope.states = data; 
         } 
        }).error(function(data, status, headers, config) { 
         if (status == '500') { 
          scope.message = "No hay conexión con el servidor."; 
         } 
        }); 

        console.log(scope.states); 
        console.log(scope.message); 

       }); 
      } 
     } 
    }]);

但console.log()陈述日志“未定义”我身边有这样的代码和指令的一些问题，我试图建立：

为什么scope.states得到“未定义”时JSON带有值？
如何访问其他select元素选择选项以获得“城市”？

注：app是我定义

编辑

我重写一些代码，一个角模块，现在是这样的指令：

app.directive('country', ['$http', function($http) { 
     return { 
      restrict: 'C', 
      link: function($scope, element, attrs) { 
       element.change(function() { 
        $http.get(Routing.generate('states') + '/' + element.val()).success(function(data) { 
         if (data.message) { 
          $scope.message = data.message; 
         } else { 
          $scope.states = data; 
         } 
        }).error(function(data, status, headers, config) { 
         if (status == '500') { 
          $scope.message = "No hay conexión con el servidor."; 
         } 
        }); 
       }); 
      } 
     } 
    }]);

林我的模板我有本HTML：

<select 
    id="common_commonbundle_standard_address_state" 
    ng-model="common_commonbundle_standard_address.state" 
    required="required" 
    ng-disabled="!states" 
    ng-options="state.name for state in states.entities" 
    tooltip="Estado" 
    tooltip-trigger="focus" 
    tooltip-placement="right" 
    wv-def="Estado" 
    wv-cur="" 
    wv-err="Error!" 
    wv-req="The value you selected is not a valid choice" 
    type="text" 
    class="state ng-scope ng-pristine ng-invalid ng-invalid-required"   
    var="common_commonbundle_standard_address.country" 
    disabled="disabled"> 
</select>

为什么，如果我这样做$scope.states = data并且它有值，那么select没有被启用，并且没有填充值？

来源

2014-03-06 ReynierPM

最有可能你的成功的功能做在你的console.log执行。把console.log放在成功/错误函数中。 $ http.get返回一个承诺。 –

@MatthewRygiel我做了一些修改并修复了代码，你能看看我的编辑吗？ – ReynierPM

你可以把你的代码或plunker或类似的服务，所以我可以看到更多的代码交互？ –

像评论中提到的那样，您需要将您的控制台日志记录移到成功回调的内部。这只是异步请求的性质。

对于1）

$http.get(Routing.generate('states') + '/' + element.val()).success(function(data) { 
    console.log('success!'); 
    if (data.message) { 
     scope.message = data.message; 
    } else { 
     scope.states = data; 
    } 
    console.log(scope.states); 
    console.log(scope.message); 
    }).error(function(data, status, headers, config) { 
    if (status == '500') { 
     scope.message = "No hay conexión con el servidor."; 
    } 
    });

对于2）你会想使用什么是越来越设置为NG-模型

来源

2014-03-06 18:01:08 thescientist

从属选择元素的AngularJS指令

回答

相关问题