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

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

angularjs

Angularjs 如何使用JavaScript访问自定义指令中传递的变量？,angularjs,angularjs-directive,angularjs-scope,Angularjs,Angularjs Directive,Angularjs Scope,我已经创建了一个自定义指令，可以在双Squiqly括号内访问direct.template中传递的变量，如directive.template='{{text.incorrectAnswers}}}，但是如何在JavaScript中访问它，以便更改它，然后将其传递回directive.template <html ng-app="mainApp"> <head> <script src="http://code.jquery.com/jque

我已经创建了一个自定义指令，可以在双Squiqly括号内访问direct.template中传递的变量，如

directive.template='{{text.incorrectAnswers}}}

，但是如何在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>


公司信息
var mainApp=angular.module（'mainApp'，[]）；
mainApp.controller（'mainController'，函数（$scope）{
$scope.text=[
{
正文：“客户1来自[@@blank]，客户2来自[@@blank]”，
正确答案：“柏林；汉堡”，
不正确的回答：“斯图加特；慕尼黑；法兰克福”
},
{
正文：“公司3位于[@@blank]。”，
回答：“不来梅”，
不正确的回答：“汉诺威；德累斯顿；斯图加特”
}
];
});
mainApp.directive（'showPhrase'，function（）{
var指令={}；
directive.restrict='A'；
指令范围={
文本：'=text'
};
//var parts=incorrectAnswers.split（“；”）；//错误：未定义incorrectAnswers
//var parts=$scope.incorrectAnswers.split（“；”）；//错误：未定义incorrectAnswers
var parts=directive.incorrectAnswers.split（“；”）；//错误：未定义incorrectAnswers
directive.template='{{text.body}}}'；
返回指令；
});

双向绑定属性作为范围对象的一部分提供，并且在创建指令期间无法访问，因为还不存在范围。您至少需要等到链接阶段或在控制器中访问作用域及其属性。如果您使用的是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;
});

mainApp.directive（'showPhrase'，function（）{
var指令={}；
directive.restrict='A'；
指令范围={
文本：'='
};
/*连接函数*/
directive.link=函数（范围，elm）{
scope.parts=scope.text.incorrectAnswers.split（“；”）；
控制台日志（部分）
}
directive.template='{{text.body}}{{part}}；
返回指令；
});

var mainApp=angular.module（'mainApp'，[]）；
mainApp.controller（'mainController'，函数（$scope）{
$scope.text=[{
正文：“客户1来自[@@blank]，客户2来自[@@blank]”，
正确答案：“柏林；汉堡”，
不正确的回答：“斯图加特；慕尼黑；法兰克福”
}, {
正文：“公司3位于[@@blank]。”，
回答：“不来梅”，
不正确的回答：“汉诺威；德累斯顿；斯图加特”
}];
});
mainApp.directive（'showPhrase'，function（）{
var指令={}；
directive.restrict='A'；
指令范围={
文本：'='
};
directive.link=函数（范围，elm）{
scope.parts=scope.text.incorrectAnswers.split（“；”）；
控制台日志（部分）
}
directive.template='{{text.body}}{{part}}
；
返回指令；
});

公司信息
双向绑定属性作为范围对象的一部分提供，并且在创建指令期间无法访问，因为还不存在范围。您至少需要等到链接阶段或在控制器中访问作用域及其属性。如果您使用的是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;
});

mainApp.directive（'showPhrase'，function（）{
var指令={}；
directive.restrict='A'；
指令范围={
文本：'='
};
/*连接函数*/
directive.link=函数（范围，elm）{
scope.parts=scope.text.incorrectAnswers.split（“；”）；
控制台日志（部分）
}
directive.template='{{text.body}}{{part}}；
返回指令；
});


var mainApp=angular.module（'mainApp'，[]）；
mainApp.controller（'mainController'，函数（$scope）{
$scope.text=[{
正文：“客户1来自[@@blank]，客户2来自[@@blank]”，
正确答案：“柏林；汉堡”，
不正确的回答：“斯图加特；慕尼黑；法兰克福”
}, {
正文：“公司3位于[@@blank]。”，
回答：“不来梅”，
不正确的回答：“汉诺威；德累斯顿；斯图加特”
}];
});
mainApp.directive（'showPhrase'，function（）{
var指令={}；
directive.restrict='A'；
指令范围={
文本：'='
};
directive.link=函数（范围，elm）{