Question

我有一个带有html模板的自定义指令，它基本上是一个菜单选项。当用户进行选择时，它会更新指令中的ng-model变量。

但我想将指令外部传递的ng-model变量放入html页面。

以下是代码段：

指令：

(function() {
    'use strict';

    angular
        .module('myModule')

        .controller('myController', ['$scope', function($scope) {
            $scope.sortByOptions = [
                { value:'red', displayText:'Redder' },
                { value:'blue', displayText:'Bluer' },
                { value:'gold', displayText:'Golder' },
                { value:'brown', displayText:'Browner' }
            ];
        }]

    )

        .directive('myDirective', myDirective);

    myDirective.$inject = [];
    function myDirective() {
        return {
            restrict: 'A',
            templateUrl: 'mydirective/sorting.html',

        }
    }
})();

指令的HTML模板：

<select ng-model="sortBy" ng-options="sortByOption.displayText for sortByOption in sortByOptions track by sortByOption.value"> </select> {{sortBy.value}}

页面的HTML：

        <div class="col-md-8 form-inline" my-directive>
        </div>

<!-- need ng-model variable from my-directive passed into sortBy --> <!-- it's being called on same page. I turned a menu options into a directive to save from copying/pasting same code everywhere. when the menu option gets selected it populates a list which is the li you see below -->

    <li ng-repeat="object in objects | filter: searchTool | orderBy: (sortAscending ? '' : '-') + sortBy">
        <div class="plank">
            <div class="plank-header">
                </div>
            </div>
        </li>

正如您所看到的，我正在尝试将用户选择的指令中的ng-model =“sortBy”值传递到li中的sortBy页面的其他部分。

如果有人可以举例说明他们做了什么，那就太棒了。

Answer 1

通过将指令中的变量暴露给控制器，我做了类似的事情。您可以通过将函数从控制器传递到指令中来执行此操作，以便调用该函数并在控制器中实际设置变量。这样的事情。

   <div mydirective call-outside-function="setSortBy".....>

   mycontroller function(...) {

      $scope.setSortBy = function(sb) {
        $scope.localSortBy = sb;
      };
   }

   mydirective .....
      link: function(scope,element,attrs) {

          scope.$watch('sortBy',function(newval) {
                 attrs.callOutsideFunction(newval); 
          });
      }

可能不是最优雅的解决方案，但它有效

Answer 2

我做了以下事情： 1）添加了一个范围。$ watch允许我的指令监听DOM上该变量的变化。然后它将在控制器中设置新值

2）将控制器添加到指令中。我原本忘了在函数colorSorter中添加一行来返回控制器

3）我不需要修改指令的html模板或页面的主html模板以使其正常工作。

这是指令：

(function() {
    angular
        .module('myModule')

        .controller('sortController', ['$scope', function($scope) {

            $scope.sortByOptions = [
                { value:'red', text:'Redder' },
                { value:'blue', text:'Bluer' },
                ];
            $scope.sortBy = {value: undefined}
        }]
    )
        .directive('colorSorter', colorSorter);
    colorSorter.$inject = [];

    function colorSorter() {
        return {
            restrict: 'A',
            templateUrl: 'app/color-sorter/color-sorter.html',
            controller: 'sortByController',
            link: function (scope) {

                scope.$watch('sortBy.value', function (value) {
                console.log(value);
                })
            }
        }
    }
})();

如何将指令（ngModel）中的变量传递到指令

2 个答案: