更多编辑

Question

我已经陷入其中一种角色束缚（没有双关语）我无法让我的控制者与我的指令对话。

我的指令如下，带有模板的选择下拉列表：

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

这更像是评论，但在那里发布代码很尴尬。我想知道为什么你在这里指定monthChoice

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

然后尝试在链接功能中重新分配它？

编辑：我想我会使用你已经拥有的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对象设置为另一个对象时，它们将通过引用链接。

更多编辑

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

.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，因为有角度处理这个：）

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

monthChosen（控制器）＆lt; =＆gt; 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

如何将指令模板模型传递给控制器/父作用域

2 个答案:

更多编辑

如何将指令模板模型传递给控制器​​/父作用域

2 个答案:

更多编辑

如何将指令模板模型传递给控制器/父作用域