将指令的属性分配给范围值

时间:2015-06-12 13:30:19

标签: angularjs

我正在创建一个指令:

<div custom-directive option1="Sam" option2="Pam" modelname="position.name">

我想分配option1和option2(它取决于我点击哪个)作为我在全局范围创建的范围的值,其中modelname作为范围的名称。

和指令定义就是这样

user.directive('customDirective',['$parse',function($parse){
      return{
          restrict: 'A',
          scope: 'false', //because i want to expose the scope globally
          link: function(scope,iElement,iAttrs){
          // create a scope with modelname as its name;
             using $parse maybe.. but i dont know how ..
          // create the template for the directive
          var optionElement1 = angular.element( "<span>"+iAttrs['option1']+"</span>");
          var seperator = angular.element("<span>"+" / "+"</span>");
          var optionElement2 = angular.element("<span>"+iAttrs['option2']+"</span>");
                iElement.append(optionElement1).append(seperator).append(optionElement2);
          optionElement1.click(function(){
          // assign iAttrs['option1'] to the scope created
          })
          optionElement2.click(function(){
          // assign iAttrs['option2'] to the scope created

          })
          }
         }

 }])

1 个答案:

答案 0 :(得分:0)

我自己想通了。发布它以防万一有人面临同样的问题..

我使用ngModelController来做,只使用ng-model而不是modelname属性

<div custom-directive option1="Sam" option2="Pam" ng-model="position.name">

在指令定义中:

user.directive('customDirective',[function(){
  return{
      restrict: 'A',
      require: 'ngModel',
      link: function(scope,iElement,iAttrs,ctrl){
      var optionElement1 = angular.element( "<span>"+iAttrs['option1']+"</span>");
      var seperator = angular.element("<span>"+" / "+"</span>");
      var optionElement2 = angular.element("<span>"+iAttrs['option2']+"</span>");
      iElement.append(optionElement1).append(seperator).append(optionElement2);
      optionElement1.click(function(){
        scope.$apply(function() {
          ctrl.$setViewValue(iAttrs['option1']);
        });
      })
      optionElement2.click(function(){
        scope.$apply(function() {
          ctrl.$setViewValue(iAttrs['option2']);
        });
      })
     }
  }

}])