Javascript 如何将变量从指令（ngModel）传递到指令外部的html中

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

但是我想将指令中的ng模型变量传递到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}}

(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);
                })
            }
        }
    }
})();

{{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的页面的其他部分

---

如果有人能举例说明他们的做法，那就太棒了。

我也做过类似的事情，将指令中的变量公开给控制器。您可以通过将一个函数从控制器传递到指令中来实现这一点，以便调用该函数并在控制器中设置一个变量。像这样的

   <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); 
          });
      }

mycontroller函数（…）{
$scope.setSortBy=函数（sb）{
$scope.localSortBy=sb；
};
}
我的指令。。。。。
链接：函数（范围、元素、属性）{
范围$watch（'sortBy'，函数（newval）{
属性调用函数（newval）；
});
}

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

我做了以下几点： 1） 添加了一个作用域。$watch以允许我的指令侦听DOM上该变量的更改。然后它将在控制器中设置新值

2） 将控制器添加到指令中。我最初忘记在函数colorSorter中添加一行以返回控制器

3） 我不需要修改指令的html模板或页面的主html模板来让它工作

以下是指令：

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

(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);
                })
            }
        }
    }
})();

---

您在哪里使用

myDirective

？似乎您在那里有一个双向操作，因此它应该可以工作，除非您遇到

dot

问题。。ng repeat创建子作用域，仅供参考。。。因此，这完全取决于您在何处使用

myDirective

我在页面的HTML中调用myDirective。默认情况下，指令可以访问父作用域，但您似乎有一个隔离作用域，这意味着sortBy的值只能在指令内访问。@Donal这就是OP拥有

sortBy:=”的原因

如果我将变量公开给我的控制器，这将使任何页面都能够访问该变量？不，这将使其只有控制器内的页面才能访问该变量。但是，除非页面上有多个控制器，使得指令位于一个控制器中，并且从中访问指令的控制器是另一个控制器，否则这不会成为问题。如果是这种情况，您可能应该创建一个包含变量和指令的服务，并且您的其他控制器共享该服务，从而可以访问该值。我试图实施你的建议，但没能成功。我的java脚本技能非常新。你能举个例子吗？