Angular.js：数据绑定与指令控制器选项不起作用

为什么当我在指令控制器选项中指定控制器时，角度数据绑定不起作用？ $scope.emailInvalid.text通常应映射到type.text但在我的情况下，没有得到显示。Angular.js：数据绑定与指令控制器选项不起作用

JS：

.directive('alert', function() { 
    return { 
     template: '<div>{{type.text}}</div>', 
     restrict: 'E', 
     scope: { 
      type: '=' 
     }, 
     controller: function ($scope) { 
      $scope.emailInvalid = { 
       text: 'Text Alert Two' 
      }; 
     } 
    }; 
});

HTML：

<alert type="emailInvalid"></alert>

当我定义了一个单独的控制器，并与ng-controller在HTML通过它，一切工作像预期。

这是plunker。

来源

2015-03-03 dorthrithil

既然你想显示type.text你需要在指令控制器定义

$scope.type = { 
    text: 'Text Alert Two' 
};

。通过这样做，您不必将事件传递给指令。

PLUNKR

来源

2015-03-03 10:28:51 DonJuwe

在我的情况下，它的对象传递到指令是很重要的，因为会有多种类型在我的应用程序的警报，所有使用相同的标记 - 只是用不同的文字。我想通过将类型定义为属性来指定要使用的文本。看到我更新的[plunker]（http://plnkr.co/edit/U4qvd8oK6hGj07A6VvBC?p=preview）。我觉得奇怪的是，在我的示例中，两个控制器基本上是相同的，但通过使用指令控制器选项在指令内定义一个控制器，使用'scope：{type：'='}'的数据绑定不会工作。 – dorthrithil 2015-03-03 14:50:50

行，我发现一种解决方案：

的问题是，角未能以映射到$scope.emailInvalid$scope.type。我在<alert type="emailInvalid"></alert>的示例中所做的是将一个对象emailInvalid传递给该指令。 Angular在我使用指令的范围模型中寻找这个对象。显然这个对象不存在，而且角度不能映射任何东西。

我缺少的部分是，我使用指令控制器选项定义的控制器的定义与我在ng-controller中使用的控制器不同。

要解决此问题，我现在传递一个字符串而不是对象，并使用开关/大小写映射警报类型。

plunker

来源

2015-03-04 16:50:16 dorthrithil

Angular.js：数据绑定与指令控制器选项不起作用

回答

相关问题