Question

我有一个带有action属性的隔离范围的指令。在视图中使用三元运算符时，我得到Expression 'ctrl.someBoolean ? 'Some Text' : 'Different Text'' used with directive 'myDirective' is non-assignable!

用法

 <my-directive name='My Name' action="ctrl.someBoolean ? 'Some Text' : 'Different Text'">

 <my-directive name='My Name 2' action="'Some Static Text'">

指令

 angular.module('example')
  .directive('myDirective', [
    function() {
      return {
        restrict: 'E',
        replace: true,
        transclude: true,
        templateUrl: 'myDirective.html',
        scope: {
          name: '@',
          action: '=?'
        },
        require: ['myDirective', 'form'],
        controller: 'MyDirectiveCtrl',
        controllerAs: 'ctrl',
        bindToController: true
      };
    }]);

指令控制器

angular.module('example')
  .controller('MyDirectiveCtrl', ['$scope', '$element', '$attrs',
    function($scope, $element, $attrs) {
      var vm = this;

      vm.action = angular.isDefined($attrs.action) ? $attrs.action : 'Default Action';
    }
  ])

Answer 1

从使用指令的方式来看，最好不要使用双向绑定。你需要的是简单的单向属性插值，即指令用法应该是：

<my-directive name='My Name' action="{{ ctrl.someBoolean ? 'Some Text' : 'Different Text' }}"></my-directive>

和指令范围配置

scope: {
    name: '@',
    action: '@?'
},

如果使用三元表达式的双向绑定，为什么Angular会抛出错误？如果您考虑双向绑定的含义，这很容易理解。它的主要目的是允许指令范围修改原始外部范围值。但是，无法为表达式ctrl.someBoolean ? 'Some Text' : 'Different Text'分配新值。因此错误。

Answer 2

请勿在此处使用此功能。尝试：

var vm = {};
vm.action = angular.isDefined($attrs.action) ? $attrs.action : 'Default Action';

使用三元运算符时指令中的不可赋值错误

2 个答案: