Question

我尝试在角度中创建directive，以替换常规下拉列表。我需要能够将动态表达式设置为ng-options，但似乎没有在指令内部工作。

它在外面完美运作。

这是指令

angular.module('app.dropdown',[])

.directive('swDropdown',[  function ( ){
    return {
        restrict: 'E',
        replace: true,
        template:'<div><select  ng-model="swModel" ng-options="{{expression}}"  ></div>',
        link: link,
        scope:{
            swOptions:"=",
            swLabel:'@',
            swValue:'@',
            swModel:"="
        }
    };

    function link (scope, element, attrs) {
         scope.defaultText = angular.isDefined(attrs.swDefaultText)?attrs.swDefaultText:'Choose';
         scope.selected = scope.defaultText;
         scope.expression = 'item as item.name for item in swOptions';


    }
}]);

控制器示例：

angular.module('app',['app.dropdown']).controller('Ctrl', function($scope){
        $scope.model="";
        $scope.expression = 'item as item.name for item in options';
        $scope.options = [
          {id:1,name:'hola'},
          {id:2,name:'chau'}]
      });

Html：

<body ng-app="app" ng-controller="Ctrl">
    <h1>Hello Plunker!</h1>
    Working dropdown<br/>
    <select ng-model="model" ng-options="{{expression}}"></select>
    <br/>
    Not working inside a directive
    <sw-dropdown  sw-model="model" sw-options="options"></sw-dropdown>
  </body>

This is the example

有关它为什么不起作用的任何线索？

谢谢！

Answer 1

这是一个很好的问题。在当天结束时，ng-options需要在Angular处理<select>时获得值。

1）您可以在“预链接”功能中进行设置：

.directive('swDropdown',[function (){
   return {
     ...
     link: {
         pre: function(scope){
            scope.expression = "item as item.name for item in swOptions";
         },
         post: // your normal link function
     }
   }
}]);

2）或者，如果你很懒，你可以将ng-if="expression"添加到模板中，并保持一切相同：

.directive('swDropdown',[function (){
   return {
     ...
     template: '<div><select ng-if="expression" ng-model="swModel" ng-options="{{expression}}"></select></div>',
     link: link // this is treated as post-link
   }

   function link(scope, element){
     // ...
   }
}]);

3）如果你的表达式真的需要是可变的和可修改的（看起来像一个奇怪的情况，应该用更合适的ViewModel来解决），那么你需要强制重新编译：

function link(scope, element){
   ...
   scope.changeExpression = function(newExpression){
     scope.expression = newExpression;

     // $compile should be injected into your directive's function
     $compile(element)(scope);
   }
}

顺便说一下，只需将$compile(element)(scope);添加到当前的链接功能即可。

Answer 2

这是因为你有一个孤立的范围，因此ngOptions没有正确地提供这个值

将您的模板更改为

template:'<div><select  ng-model="swModel" ng-options="item as item.name for item in swOptions"></div>',

编辑：如果你真的想要传递一个节点，你需要在编译函数中执行它，因为当ngOptions指令编译它们时。

angular.module('app.dropdown',[])

.directive('swDropdown',[  function ( ){
    return {
        restrict: 'E',
        replace: true,
        template:'<div><select  ng-model="swModel" ng-options="{{expression}}"  ></div>',
        compile: compile,
        scope:{
            swOptions:"=",
            swLabel:'@',
            swValue:'@',
            swModel:"="
        }
    };

    function compile(cElement, cAttributes, transclude){
      return {
        pre: function(scope, element, attrs){
          scope.expression = 'item as item.name for item in swOptions';
        },
        post: function(scope, element, attrs){
          scope.defaultText = angular.isDefined(attrs.swDefaultText)?attrs.swDefaultText:'Choose';
          scope.selected = scope.defaultText;
        }
      }
    }
}]);

带有动态表达式的ng-options无效

2 个答案: