Question

我已经阅读了很多关于如何在隔离范围内进行绑定而不是如何在模板中检索范围自定义属性的示例。

我认为修复必须非常简单，但我不知道这里有什么问题

<!doctype html>
<html ng-app="myApp">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.3/angular.js"></script>
</head>
<body>
  <div my-directive>

  </div>

  <script>
    angular.module('myApp', [])
    .directive('myDirective', function() {
      return {
        restrict: 'A',
        scope: {
            data.myProperty:"1234"
        },
        template:'Inside myDirective, isolate scope: {{ data.myProperty }}'
      };
    })
  </script>

</body>
</html>

不知何故，无法访问data.myProperty。

Answer 1

您不能像绑定data.myProperty:"1234"那样直接使用和访问绑定中的有界属性。它最终会导致错误。

您必须通过指令的attribute传递自定义属性。在这里，您可以考虑添加custom-data属性，在其上添加范围属性名称。所以它将被传递给隔离的范围指令。

<强>控制器

$scope.data = {
   myProperty: 'My Property Value'
}

<强> HTML

<div my-directive custom-data="data">

</div>

<强>指令

angular.module('myApp', [])
.directive('myDirective', function() {
  return {
    restrict: 'A',
    scope: {
        customData: '=data'
        //without alias it will look like below.
        //customData: '='
    },
    template:'Inside myDirective, isolate scope: {{ data.myProperty }}'
    //without alias template would look like below
    //template:'Inside myDirective, isolate scope: {{ customData.myProperty }}'
  };
})

注意：好像您使用的是较旧的不稳定版本。如果可能的话，更新角度到最新的angularjs 1.7.x版本，以找到更多的功能和高性能的angularjs。在1.5.x版本之后，您还可以使用<内部绑定（customData: '<data'）来保持单向数据绑定流。为了不让您感到困惑，我使用=（双向数据绑定）进行演示。

如何在隔离范围中检索自定义属性？

1 个答案: