Question

我已经创建了一个自定义指令，并且可以在这个directive.template = '<input/>{{text.incorrectAnswers}}'的双重squiqqly括号中访问direct.template中的传递变量，但是我如何在JavaScript中访问它以便我可以更改它然后将其传递回我的directive.template？

<html ng-app="mainApp">
    <head>
        <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
        <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
    </head>    
    <body ng-controller="mainController" style="padding: 20px 0">

        <div class="col-xs-8">
            <div class="panel panel-default">
                <div class="panel-heading">Company Info</div>
                <div class="panel-body">
                    <div ng-repeat="text in texts">
                        <div data-show-phrase data-text="text"></div>
                    </div>
                </div>
            </div>
        </div>

        <script>
                            var mainApp = angular.module('mainApp', []);

                            mainApp.controller('mainController', function ($scope) {
                                $scope.texts = [
                                    {
                                        body: 'Customer 1 is from [@@blank] and Customer 2 is from [@@blank].',
                                        correctAnswers: 'Berlin;Hamburg',
                                        incorrectAnswers: 'Stuttgart;Munich;Frankfurt'
                                    },
                                    {
                                        body: 'Company 3 is located in [@@blank].',
                                        answers: 'Bremen',
                                        incorrectAnswers: 'Hannover;Dresden;Stuttgart'
                                    }
                                ];
                            });

                            mainApp.directive('showPhrase', function () {
                                var directive = {};
                                directive.restrict = 'A';
                                directive.scope = {
                                    text: '=text'
                                };
                                //var parts = incorrectAnswers.split(';'); //Error: incorrectAnswers is not defined
                                //var parts = $scope.incorrectAnswers.split(';'); //Error: incorrectAnswers is not defined
                                var parts = directive.incorrectAnswers.split(';'); //Error: incorrectAnswers is not defined
                                directive.template = '<input/>{{text.body}}';
                                return directive;
                            });
        </script>
    </body>
</html>

Answer 1

作为范围对象的一部分可用的双向绑定属性，在创建指令期间无法访问，因为尚不存在范围。您需要至少等到链接阶段或在控制器中访问范围及其属性。如果您使用的是controllerAs语法（使用1.3.x），那么您可以打开bindToController:true以将其作为控制器实例的属性进行访问。只要您在模板中使用绑定，angular就会负责更新模板，以便在绑定属性中进行动态更改。

实施例： -

mainApp.directive('showPhrase', function() {
  var directive = {};

  directive.restrict = 'A';

  directive.scope = {
    text: '='
  };
  /*Linking function*/
  directive.link = function(scope, elm) {
    scope.parts = scope.text.incorrectAnswers.split(';');
    console.log(parts)
  }


  directive.template = '<div><input/>{{text.body}} <ul><li ng-repeat="part in parts">{{part}}</li></ul></div>';
  return directive;
});

＆＃13;

var mainApp = angular.module('mainApp', []);
mainApp.controller('mainController', function($scope) {
  $scope.texts = [{
    body: 'Customer 1 is from [@@blank] and Customer 2 is from [@@blank].',
    correctAnswers: 'Berlin;Hamburg',
    incorrectAnswers: 'Stuttgart;Munich;Frankfurt'
  }, {
    body: 'Company 3 is located in [@@blank].',
    answers: 'Bremen',
    incorrectAnswers: 'Hannover;Dresden;Stuttgart'
  }];
});

mainApp.directive('showPhrase', function() {
  var directive = {};
  directive.restrict = 'A';
  directive.scope = {
    text: '='
  };
  directive.link = function(scope, elm) {
    scope.parts = scope.text.incorrectAnswers.split(';');
    console.log(parts)
  }


  directive.template = '<div><input/>{{text.body}} <ul><li ng-repeat="part in parts">{{part}}</li></ul></div>';
  return directive;
});

＆＃13;

<html ng-app="mainApp">

<head>
  <script src="http://code.jquery.com/jquery-1.11.2.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
  <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
</head>

<body ng-controller="mainController" style="padding: 20px 0">

  <div class="col-xs-8">
    <div class="panel panel-default">
      <div class="panel-heading">Company Info</div>
      <div class="panel-body">
        <div ng-repeat="text in texts">
          <div data-show-phrase data-text="text"></div>
        </div>
      </div>
    </div>
  </div>

  <script>
  </script>
</body>

</html>

＆＃13;

如何使用JavaScript访问自定义指令中传递的变量？

1 个答案: