如何在AngularJs指令中使用控制器变量

时间:2016-10-02 16:41:50

标签: javascript html angularjs angularjs-directive angular-ui-router

如何在指令中使用控制器变量。我在指令范围内使用了 popoverHtml 但是当我添加类型这样的类型时不起作用:

像这样:scope:{popoverHtml:'@',输入:@},

我的HTML是:

 good <input type='radio' name='type' value='good' data-ng-model='type' 
data-ng-change='change(type)' />
    bad <input type='radio' name='type' value='bad' data-ng-model='type'
 data-ng-change='change(type)' />
        <next-level id='pop' popover-html='{{typeMessage}}'></next-level>

我的控制器是:

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.typeMessage = 'PopOverTest';
  $scope.type = false;
  $scope.change = function(type){
    if(type == 'good'){
      $scope.typeMessage = 'very good';
    }else if(type == 'bad'){
      $scope.typeMessage = 'very bad';
    }
  };
});

我的指示:

    app.directive('nextLevel', function () {
            return {
                restrict: 'EA',
                scope:{ popoverHtml:'@'},
           template: '<a ui-sref="register" tabindex="0" linkdisabled="{{type}}" 
 class="btn btn-block btn-success ng-class: {disabled: !(type)}" role="button" >next</a>',
                link: function (scope, el, attrs){
                  $(el[0]).popover({
                        trigger: 'click',
                        html: true,
                        toggle:'popover',   
                        title: 'notice !!',
                        content: scope.popoverHtml,  // Access the popoverHtml html
                        placement: 'bottom'
                    });

                  attrs.$observe('popoverHtml', function(val){
                    $(el[0]).popover('hide');
                    var popover = $(el[0]).data('bs.popover');
                     popover.options.content = val;
                    console.log(popover); 
                  })


                } 
            };   
        });

演示https://plnkr.co/edit/wfC4DrTIp8fRIs6hEEDa?p=preview

1 个答案:

答案 0 :(得分:1)

如果要在type中使用@,请将ng-class作为type绑定发送到指令。如果您对主控制器中的ng-class进行了更改,则它们不会反映在指令内的ng-class中。看看here

为了反映=中的更改,您必须将其作为{{1}}绑定传递。

Plunker here