2

我有以下 AngularJS HTML 代码：

<div ng-controller="myController">
    <div ng-grid="myGrid"></div>
</div>

ngGrid从视口、一系列行和这些行中的单元格创建一个结构化的类似表格的组件。这些项目中的每一个都有自己的范围。此外，我在其中一个单元格中创建了自己的指令，该<range>指令类似于新的 HTML5<input type="number">标记。所以作用域链看起来像这样：

myController -> ngGrid -> ngViewport -> ngRow -> ngCell -> range

我要做的是<input>从<range>指令中获取 ' 值并以可重用的方式将其传递给myController（换句话说，不显式调用scope.$parent.$parent.$parent.$parent.$parent，以便我的指令可以在其他场景中重用）。

我尝试按照这篇文章的指示在指令代码中要求控制器，但无济于事。我还尝试了这个 egghead.io 视频所指示的表达式绑定，但仍然没有成功。真的不知道如何从这里开始。

4

3 回答 3

0

他们能够在这里使用父控制器的功能的原因是因为他们还在指令范围内将“项目”模型设置为等于父控制器的“项目”。因此，为了能够在 range 指令中使用 myController 上的函数，您仍然需要在 myController 和 range 之间的范围层之间设置相等的模型。

一种可能的解决方案是使用 Angular 的 pubsub 系统。如果 range 指令中有特定的事件触发代码让您知道您想在 myController 中捕获该值（例如 onBlur 事件），那么只需将值向上发射范围层次结构，并在 myController 中侦听该发射的事件捕捉价值。

从范围指令发出事件并传递它的值

scope.$emit("CAPTURE_VALUE", scope.inputModel);

在 myController 中监听事件，并捕获传递的值

$scope.$on("CAPTURE_VALUE", function(event, passedValue){
    $scope.rangeValue = passedValue;
};

现在只要 range 指令在 myController 的子范围内，无论输入值有多深，您都应该能够获取输入值。

于 2013-09-21T07:08:01.020 回答
0

如果<input>是这样（注意 ng-model 是第一级）：

<input type="number" ng-model="value" />

更改模型，使其处于 > 1 的级别：

<input type="number" ng-model="form.value" />
于 2013-09-20T19:44:01.267 回答
0

你不需要调用父链，你只需要 scope.$parent。因为作用域原型继承自它们的父作用域，所以任何不是值类型的东西都可以安全地访问和修改。查看此答案以了解有关范围继承如何工作的更多信息。

这是您需要的所有代码。我以两种方式实现了通信示例；第一个使用公共模型的依赖注入，第二个引用父范围。

工作的笨蛋

var app = angular.module('myApp', ['ngGrid']);

app.factory('rangeValues', function() {
    return [];
  });

app.controller('MyCtrl', function($scope, rangeValues) {
    $scope.factoryRangeValues = rangeValues;
    $scope.parentScopeRangeValues = [];
    $scope.myData = [{name: "Moroni", age: 50},
                     {name: "Tiancum", age: 43},
                         {name: "Jacob", age: 27},
                         {name: "Nephi", age: 29},
                         {name: "Enos", age: 34}];
    $scope.gridOptions = { 
        data: 'myData',
        columnDefs: [{field: 'name', displayName: 'Name'},
                     {field:'age', displayName:'Age', cellTemplate: '<div ng-class="{green: row.getProperty(col.field) > 30}"><div class="ngCellText"><div ng-range value="row.getProperty(col.field)">{{ value }}</div></div></div>'}]
        };
});

app.directive('ngRange', function(rangeValues) {
  return {
    restrict: 'EA',
    scope: {
      value: '='
    },
    link: function(scope, element, attrs) {
      // Pushing values to the injected model.
      rangeValues.push({
        value: scope.value
      });
      // Pushing values to the model on the parent scope
      scope.$parent.parentScopeRangeValues.push({
        value: scope.value
      })
    }
  }
});
于 2013-09-21T18:32:14.927 回答