1

如果我的“父”页面中有一个 html 元素，如下所示：

   <div ng-include"'Go-To-Child-Page.html'" />

我的任何孩子/包含页面都是这样的：

   <some-directive two-way-binding="$parent.SomeParentScope"></some-directive>

为什么这不适用于我的指令？或者更好的是，我该如何让它发挥作用？

 app.directive ('someDirective', function(){
    return {
        retrict: 'E',
        replace: true,
        scope: {
            myBinding : "=twoWayBinding",  <- this is what is not working
        },
        template: '<select ng-model="myBinding" ng-options="myType.Description for myType in myTypes"></select>'
    };
}

编辑更新：

为什么我发布这个问题？

完成一个很长的表格后，我立即注意到我有很多类似的控件，我的编码员说我应该抽象出来。其中之一是选择控件。此控制涉及两个场景：

(1) 用户必须在填充选择控件之前选择过滤器；和

(2) 其中代码为选择控件预定义了过滤器。

这两种情况的解决方案如下所示。我希望这对每个人都有帮助，因为我真的很喜欢使用 Angular，它提供的用于创建“Html-magic”的指令功能非常棒。

4

2 回答 2

1

您似乎做了很多不必要的事情，但这可能是因为我误解了您的目标。

我在这里修复了你的 plnkr：http://plnkr.co/edit/FqpzC5p1Ogm4attYiArV?p= preview

必要的基本更改似乎是：

  1. 将选定的过滤器（后/前）传递到您的指令中
  2. 替换ngOptions为ngRepeat和 过滤器

您的指令实际上不需要控制器（通常大多数指令应该使用链接器函数）。我删除了一些部分以使其更简单，但您仍然可以$scope.filterTypes按原样连接（从 中提取可用的类型$scope.myTypes）并且它仍然可以正常工作。

更新

由于您没有详细说明您的所有要求，我可能会遗漏一些，但这个实现是我收集到的您正在寻找的：

http://plnkr.co/edit/pHgJ84Z35q5jxCpq3FHC?p=preview

它有动态过滤，不需要使用控制器，它有双向绑定。唯一的问题是它引用了“描述”字段（就像您原来的那样）。如果您愿意，您可以使用 HTML 进行配置。

于 2013-04-24T15:16:07.917 回答
0

场景1：让用户过滤：

Filter: 
<input type="radio" ng-model="choice.type" value="Rear"> Rear
<input type="radio" ng-model="choice.type" value="Front"> Front
<br>
Select:
<name-value-select selected-item="selected.item" choice="choice.type" options="axleTypes"></name-value-select>

场景2：代码中的预过滤：

<name-value-select preselected-filter="Front" selected-item="selected.item" options="axleTypes"></name-value-select>

两种情况的指令：

.directive('nameValueSelect', function () {
  return {
    replace: true,
    restrict: "E",
    scope: {
        selectedItem: "=",
        choice: "=",
        options: "=",
        preselectedFilter: "@"
    },
    controller: function ($scope) {
        $scope.$watch('choice', function (selectedType) {
            $scope.selectedItem = '';  // clear selection
            $scope.filterTypes = [];
            angular.forEach($scope.options, function (type) {
                if ($scope.preselectedFilter !== undefined) {
                    selectedType = $scope.preselectedFilter;
                }
                if (type.Type === selectedType) {
                    this.push(type);
                }
            }, $scope.filterTypes);
            $scope.filterTypes.sort(function (a, b) {
                return a.Description.localeCompare(b.Description);
            });
        });
    },
    template: '<select  ng-model="selectedItem"  ng-options="o.Description for o in filterTypes"><option value="" selected="selected">Please Select </option></select>'
}; 
 });

和众所周知的强制性plunker：

http://plnkr.co/edit/tnXgPKADfr5Okvj8oV2S

于 2013-04-26T14:23:09.503 回答