Angularjs Как определить идентификатор приглашения по переменным?

Я пытаюсь добавить кнопку Google Hangouts, чтобы звонить по электронной почте. Если я жестко запрограммировал кнопку электронной почты, она работает нормально, но могу ли я использовать строковую переменную для идентификатора приглашения, чтобы я мог динамически отображать кнопки hongout? Пример: приглашает [{ id : person.email }].

           <g:hangout render="createhangout"
                       invites="[{ id : '[email protected]', invite_type : 'EMAIL' }]">
            </g:hangout>

Вот блок кода повторителя. Что мне не хватает?

 <ul>
            <li data-ng-repeat="person in contacts | orderBy:'name'">
                {{person.name}}  {{person.surname | uppercase}} --> {{person.email}} - <button ng-click="del($index)">Delete</button>
                <g:hangout render="createhangout"
                           invites="[{ id : '{{person.email}}', invite_type : 'EMAIL' }]">
                </g:hangout>
            </li>
        </ul>

Но также я пытаюсь обновлять и добавлять новых людей, чтобы динамически создавать кнопки видеовстречи. Я думаю, что моя главная проблема в том, что вот весь код.

  <!DOCTYPE html>
   <html data-ng-app="hangoutApp">
   <body>
    <div data-ng-controller="SimpleController">
        <h2>Add a person to contact:</h2>
        <br />
        Enter Name:
        <input type="text" data--ng-model="name" /> 
        <br />
        <br />
        Enter Surname:
        <input type="text" data--ng-model="surname" />
        <br />
        <br />
        Enter Email:
        <input type="text" data--ng-model="email" />
        <br />
        <br />
        <button ng-click="addPerson()">Add New Person</button>
        <br />
        <br />
        <ul>
            <li data-ng-repeat="person in contacts | orderBy:'name'">
                {{person.name}}  {{person.surname | uppercase}} --> {{person.email}} - <button ng-click="del($index)">Delete</button>
                <g:hangout render="createhangout"
                           invites="[{ id : '{{person.email}}', invite_type : 'EMAIL' }]">
                </g:hangout>
            </li>
        </ul>
    </div>

    <script src="https://apis.google.com/js/platform.js" async defer></script>
    <script src="Scripts/angular.min.js"></script>
    <script>
        var hangoutApp = angular.module('hangoutApp', []);

        var controllers = {};
        controllers.SimpleController = function SimpleController($scope) {
            $scope.name = "";
            $scope.surname = "";
            $scope.email = "";
            $scope.contacts = [];
            $scope.addPerson = function () {
                this.contacts.push({
                    name: this.name,
                    surname: this.surname,
                    email: this.email
                });
            }
            $scope.del = function (ind) {
                this.contacts = this.contacts.splice(ind, 1);
            };

        }


        hangoutApp.controller(controllers);
    </script>
</body>


javascript angularjs google-hangouts
person chaos    schedule 18.06.2015    source источник
comment
Какой код? Оригинал от Гугла? Можешь выложить оригинал?   -  person michelem    schedule 18.06.2015
comment
Попробуйте и узнайте. Если это не удается, отредактируйте свой вопрос с деталями, и мы постараемся помочь.   -  person ryanyuyu    schedule 18.06.2015
comment
Я забыл добавить, но я уже пробовал и потерпел неудачу, я не могу использовать переменную в этой структуре. Есть идеи?   -  person chaos    schedule 18.06.2015

Ответы (1)


arrow_upward
0
arrow_downward

вы можете сделать это, используя {{}} во фрагменте, я также добавил повторитель, чтобы вы могли делать их кучу на лету.

<g:hangout  render="createhangout"
                       invites="[{ id : '{{person.Email}}', invite_type : 'EMAIL' }]">
</g:hangout>


var app=angular.module('myApp',[]);
app.controller('myController', ['$scope', function($scope){ 
  $scope.people = [{Email:'[email protected]'}];
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myController">
  <div ng-repeat="person in people">
<g:hangout  render="createhangout"
                       invites="[{ id : '{{person.Email}}', invite_type : 'EMAIL' }]">
    </g:hangout>
  <span>{{person.Email}}</span>
    </div>
 </div>

person mikeswright49    schedule 18.06.2015
comment
Я попробовал ваше решение, но все еще чего-то не хватает, я не смог его отобразить. Я обновлю код своей частью повторителя. Можешь еще раз проверить? - person chaos; 18.06.2015
comment
Может быть проблема с динамической загрузкой кнопок видеовстречи, что произойдет, если вы сделаете повторитель с жестко закодированным адресом электронной почты? - person mikeswright49; 19.06.2015
comment
Когда он жестко запрограммирован, проблем не возникает. Он хорошо визуализируется. Но я хочу добавить новых людей и соответствующим образом обновить список. Вот почему я использую angular, но я новичок в angular, поэтому есть ли способ динамически отображать кнопки? - person chaos; 19.06.2015
comment
Так как вы используете пользовательский тег (g:hangout), у вас будет жизненный цикл, который заставит кнопки отображаться. В результате в этой ситуации может быть невозможно использовать angular. Возможно, вам нужно согласовать загрузку гугл-скрипта для отрисовки кнопок. - person mikeswright49; 19.06.2015