Question

我是AngularJS的新手，并在导航栏上创建一个新菜单，用户登录后会填充并显示对象的名称。我希望能够点击该项并显示该对象的另一个变量一个警告框。我正在使用一个指令来填充对象，它看起来如下：

angular.module('angularWebApp.headerDirectives', [])
.directive('machineList', function(){
  // Runs during compile
  return {
    // name: '',
    // priority: 1,
    // terminal: true,
    // scope: {}, // {} = isolate, true = child, false/undefined = no change
    controller: function($scope, $element, $attrs, $transclude, $http) {
      $scope.machineObj = [];
      $scope.alertMe = function($keyword){
        alert($keyword.Address);
      };
      if($scope.user !== undefined) {
          if($scope.user.Key.constructor === Array) {
            angular.forEach($scope.user.Key, function(software_key, key){
                $http.get('URL' + software_key + '/DATA').
              success(function(data/*, status, headers, config*/) {
                if(data.id === 'error') {
                  console.log(data);
                } else {
                  $scope.machineList = data;
                  angular.forEach($scope.machineList,function(machine,index){
                    $scope.machineObj.push({
                      Name: machine.Name,
                      Address: machine.Address,
                      Key: machine.Key
                    });

                  });
                }
              }).
              error(function(data/*, status, headers, config*/) {
                alert(data);
              });
            });

          }
    } else {
      $http.get('URL' + $scope.user.key + '/DATA').
          success(function(data/*, status, headers, config*/) {
        if(data.id === 'error') {
          console.log(data);
        } else {

          angular.forEach($scope.machineList,function(machine,index){
            $scope.machineObj.push({
              Name: machine.Name,
              Address: machine.Address,
              Key: machine.SoftwareKey
            });

          });
          console.log($scope.machineObj);
        }
      }).
      error(function(data/*, status, headers, config*/) {
        alert(data);
      });
    }
},
// require: 'ngModel', // Array = multiple requires, ? = optional, ^ = check parent elements
restrict: 'AE', // E = Element, A = Attribute, C = Class, M = Comment
template: '<li ng-machine ng-repeat="machine in machineObj" class="text-center"><a ng-href="" ng-click="alertMe(machine)">{{::machine.Name}}</a></li>',
// templateUrl: '',
replace: true,
// transclude: true,
// compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})),
//link: function(scope, iElm, iAttrs, controller, $http) {}
  };
});

抱歉格式化。然后我有HTML，如下所示：

< li ng-switch-when="true">
    <a href="" class="machines dropdown-toggle" data-toggle="dropdown"></a>
    < ul class="dropdown-menu">
        < machine-List>
        < /machine-List>
    < /ul>
< /li>

Machine-List替换为我在指令中定义的模板，http.get成功完成。当用户选择似乎是问题的菜单项时，它只是调用一个函数。我提前感谢任何帮助！

更新Ralfe Pastbin

这是我得到的输出：

Initialising Scope.
headerDirectives.js:129 User exists
headerDirectives.js:129 Key is an array
headerDirectives.js:129 Processing data.
headerDirectives.js:67 [Object, Object, Object, Object, Object, Object,Object, Object, Object, Object]0: Object1: Object2: Object3: Object4: Object5: Object6: Object7: Object8: Object9: Objectlength: 10__proto__: Array[0]

最后一行是我的console.log

Answer 1

在控制器中，您可以将功能附加到范围，如下所示：

$scope.someFunction = function(myParam1) {
    // Do something amazing here.
};

然后，您可以从以下视图访问该功能：

<span class='btn btn-primary' ng-click='someFunction(4)'>Click Me</span>

希望有所帮助。

调用指令中引用的函数

更新Ralfe Pastbin

1 个答案: