Question

我是 AngularJS 的新手，我有点难以理解如何获得与嵌套Angular表达式类似的功能（即{{ {{ variable }} }}是否被视为合法语法）

我想将控制器作用域变量（foo，bar）的名称存储在一个单独的控制器作用域变量（myCondition）中，我希望能够通过评估myCondition指令并将其评估结果评估为模板中的{{foo}} --> outcomeFoo或{{bar}} --> outcomeBar。

在网上阅读了很多针对类似问题的解决方案后，我尝试了各种变体：

{{$eval(condition)}}
{{scope.$eval(condition)}}
{{scope.$parent.$eval(condition)}}

和

condition: '@myDirective' / <p my-directive="{{myCondition}}">
condition: '=myDirective' / <p my-directive="myCondition">
condition: '&myDirective' / <p my-directive="myCondition">

我仍然无法弄清楚我哪里出错了。

任何帮助都将不胜感激。

var myApp = angular.module("myApp", []);

myApp.controller('myController', function($scope) {
  $scope.myCondition = "foo";

  $scope.foo = "outcomeFoo";
  $scope.bar = "outcomeBar";
});

myApp.directive('myDirective', function() {
  return {
    scope: {
      condition: '@myDirective'
    },
    template: function(scope, attrs) {
      return 'Condition "{{condition}}" evalutes as, {{$eval(condition)}}.'
    }
  };
});

<html ng-app="myApp">

<body ng-controller="myController">
  <p my-directive="{{myCondition}}"></p>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

</html>

编辑（解决方案）

通过向指令添加controller: 'myController',来解决，使其显示为：

myApp.directive('myDirective', function() {
  return {
    controller: 'myController',
    scope: {
      condition: '@myDirective'
    },
    template: function(scope, attrs) {
      return 'Condition "{{condition}}" evalutes as, {{$eval(condition)}}.'
    }
  };
});

这将提供

的输出

条件“foo”评估为outcomeFoo。

Answer 1

我不确定这是你所追求的，但这有效：

<!DOCTYPE html>
<html ng-app="myApp">
  <head>
    <title>AngularJS Example</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
    <script>
    var myApp = angular.module("myApp", []);

    myApp.controller('appController', function($scope) {
      $scope.myCondition = "foo";
    });


    myApp.controller('myController', function($scope) {
      $scope.values = {
        foo: "outcomeFoo",
        bar: "outcomeBar"
      };
    });


    myApp.directive('myDirective', function() {
      return {
        controller: 'myController',
        scope: {
          condition: '@myDirective'
        },
        template: 'Condition "{{condition}}" evalutes as, {{values[condition]}}.'
      };
    });
    </script>
  </head>
  <body ng-controller="appController">
    <p my-directive="{{myCondition}}"></p>
  </body>
</html>

我正在做的是为应用程序提供一个独特的控制器，为指令提供第二个控制器。指令的控制器有一个对象，其中包含foo和bar的值。这样，您可以使用condition作为$scope.values对象的密钥。

当然，如果传入的条件与$scope.values对象的属性不匹配，则会失败。

如果这不是你想要的，请告诉我。

嵌套角度表达式

编辑（解决方案）

1 个答案: