如何将指令模板模型传递给控制器/父范围

Question

呃，我被困在其中一个 Angular 绑定中（没有双关语意），我无法让我的控制器与我的指令对话。

我的指令如下，一个带有模板的 select 下拉菜单：

app.directive('month', function() {
  return {
    replace:true,
    scope:{
     months:"=",
     monthChoice:"="
   },
    template:'<select ng-model="monthChoice" ng-options=\"currMonth for currMonth in months\" class=\"monthsClass\"></select>',
    link: function (scope, element, attrs) {

      var lastEntry = scope.months.length - 1;
      scope.monthChoice = scope.months[lastEntry];

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

填充 select 的 months 值来自与控制器通信的服务：

app.controller('CandListCtrl', ['$scope', 'Months',
  function ($scope, Months) {

    $scope.months = Months.init();

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

    $scope.whichMonth = function(m) {
      console.log(m);
      console.log($scope.month);
      return true
    }

  }]);

我希望能够做的是在发生变化时将模型 monthChoice 的值传递给控制器。这样，我就可以从局部视图中的其他 html 元素访问它。我的局部视图设置如下：

<month months="months" ng-change="whichMonth(monthChoice)"></month><br>

它位于使用典型的 $routeProvider 路由的部分内部：

app.config(['$routeProvider',
  function($routeProvider) {
    $routeProvider.
      when('/', {
        templateUrl: 'partials/cand-list.html',
        controller: 'CandListCtrl'
      }).
      otherwise({
        redirectTo: '/'
      });
  }]);

我抛出以下错误：Expression 'undefined' used with directive 'month' is non-assignable!

而且我无法从控制器访问该值。

Answer 1

这更像是一条评论，但 post 在那里编码很尴尬。我想知道你为什么在这里指定 monthChoice

scope:{
     months:"=",
     monthChoice:"="
   }

然后尝试在您的 link 函数中重新分配它？

编辑：我想我只会使用您已有的 Months 服务并在那里设置 monthChoicce 变量。然后它可以很容易地在其他控制器中重用，你有什么：

app.directive('month', function(Months) {
  return {
    replace:true,
    scope:{
     months:"="

   },
    template:'<select ng-model="service.monthChoice" ng-options=\"currMonth for currMonth in months\" class=\"monthsClass\"></select>',
    link: function (scope, element, attrs) {

      var lastEntry = scope.months.length - 1;
      scope.service = Months;

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

编辑：进行了更新。您必须绑定到一个对象，在本例中，我使用服务对象本身，以使更改在整个过程中得到反映。这是因为当您将一个 javascript 对象设置为另一个对象时，它们会通过引用得到 link。

更多编辑

好的，这是另一个与您最初尝试做的更多匹配的尝试。没有服务或其他魔法。这是控制器：

.controller('myController', function($scope) {
    $scope.months = [
        'Jan',
        'Feb',
        'Mar'
    ];
    $scope.monthChosen = '';
})

只是一个简单的月份数组和我们的 monthChosen 变量，所有这些我们都会发送到指令。 monthChosen 将通过 ng-model 和双向绑定自动更改。这是我们的路线模板：

<div data-ng-app="myApp" data-ng-controller="myController">
    <div data-my-directive months="months" month-choice="monthChosen"></div>
    <div>{{monthChosen}}</div>    
</div>

您可以看到在指令之外显示了 monthChosen。当您更改下拉列表时，它会发生变化。这是我们的指令：

.directive('myDirective', function(){
    function link(scope, elem, attrs){
        //You can do fun stuff here if you want        
    }
    return {
        scope: {
            months: '=',
            monthChoice: '='
        },
        link: link,
        template: '<select ng-model="monthChoice" ng-options="currMonth for currMonth in months" class="monthsClass"></select>'
    }
});

此时除了我们的模板和范围定义外，它不包含任何内容。如您所见，您不必自己设置 monthChoice，因为 angular 会处理这个 :)

jsFiddle: http://jsfiddle.net/vt52bauu/

monthChosen（控制器）<=> monthChoice（指令）

Answer 2

您可以简单地同时使用指令和 ngModel 并通过 ngModel.NgModelController 进行通信。例如...

app.directive('month', function() {
  return {
    restrict: 'E',
    replace: true,
    require: 'ngModel',
    scope: {
      months: '='
    },
    template: '<select class="monthsClass" ng-options="month for month in months"></select>',
    link: function(scope, element, attr, modelController) {
      modelController.$setViewValue(scope.months[scope.months.length - 1]);
      modelController.$render();
    }
  }
});

和

<month ng-model="month" months="months"></month>

Plunker

如何将指令模板模型传递给控制器/父范围

How to pass a directive template model to controller / parent scope

angularjs

angularjs-directive

angularjs-model

更多编辑

如何将指令模板模型传递给控制器​​/父范围

How to pass a directive template model to controller / parent scope

angularjs

angularjs-directive

angularjs-model

更多编辑

如何将指令模板模型传递给控制器/父范围