Question

我正在尝试从FACEBOOK构建@TagFriends和评论框功能。我发现了两个可能有用的示例，当我在第二个中导入一个示例库时，我遇到了库问题，整个代码无法工作，如果它们单独执行则它们正常工作。

1.简单评论框： http://devzone.co.in/angularjs-example-simple-user-comment-box/ 2. @ Tag朋友代码下方：

  <!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap@*" data-semver="3.3.2" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://urbanoalvarez.es/smart-area/dist/smart-area.css">

    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script data-require="bootstrap@*" data-semver="3.3.2" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script data-require="angular.js@1.3.8" data-semver="1.3.8" src="https://code.angularjs.org/1.3.8/angular.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular-sanitize.js"></script>
    <script src="http://urbanoalvarez.es/smart-area/dist/smart-area.js"></script>
    <script src="elastic.js"></script>
    <script src="app.js"></script>
    <style>
      .user{
        color: #0074D9;
      }
    </style>
  </head>

  <body ng-app="myApp">
    <div class="container" ng-controller="DemoController">
      <h3>MOC 12</h3>
      <!--<h4>@user mentions</h4>-->
      <textarea class="form-control code" rows="5" ng-model="text" ng-trim="false" msd-elastic smart-area="config"></textarea>
      <hr>
      <small class="text-muted">
        <b>Available users:</b><br> Bret, Antonette, Samantha, Karianne, Kamren, Leopoldo_Corkery, Elwyn.Skiles, Delphine, Maxime_Nienow, Moriah.Stanton <br>
        Type for example "Hey @Antonette"

    </div>

    <script>

        /*
 * angular-elastic v2.4.2
 * (c) 2014 Monospaced http://monospaced.com
 * License: MIT
 */
angular.module('myApp', ['smartArea', 'monospaced.elastic'])
  .controller('DemoController', ['$scope', '$http', function($scope, $http) {
    $scope.text = '';

    $scope.config = {
      autocomplete: [
        {
          words: [/@([A-Za-z]+[_A-Za-z0-9]+)/gi],
          cssClass: 'user'
        }
      ],
      dropdown: [
        {
          trigger: /@([A-Za-z]+[_A-Za-z0-9]+)/gi,
          list: function(match, callback){

            // match is the regexp return, in this case it returns
            // [0] the full match, [1] the first capture group => username
            $http.get('http://jsonplaceholder.typicode.com/users')
            .success(function(data){
              // Prepare the fake data
              var listData = data.filter(function(element){
                return element.username.substr(0,match[1].length).toLowerCase() === match[1].toLowerCase()
                && element.username.length > match[1].length;
              }).map(function(element){
                return {
                  display: element.username, // This gets displayed in the dropdown
                  item: element // This will get passed to onSelect
                };
              });
              callback(listData);
            }).error(function(err){
              console.error(err);
            });
          },
          onSelect: function(item){
            return item.display;
          },
          mode: 'replace'
        }
      ]
    };
  }]);


angular.module('monospaced.elastic', [])

  .constant('msdElasticConfig', {
    append: ''
  })

  .directive('msdElastic', [
    '$timeout', '$window', 'msdElasticConfig',
    function($timeout, $window, config) {
      'use strict';

      return {
        require: 'ngModel',
        restrict: 'A, C',
        link: function(scope, element, attrs, ngModel) {

          // cache a reference to the DOM element
          var ta = element[0],
              $ta = element;

          // ensure the element is a textarea, and browser is capable
          if (ta.nodeName !== 'TEXTAREA' || !$window.getComputedStyle) {
            return;
          }

          // set these properties before measuring dimensions
          $ta.css({
            'overflow': 'hidden',
            'overflow-y': 'hidden',
            'word-wrap': 'break-word'
          });

          // force text reflow
          var text = ta.value;
          ta.value = '';
          ta.value = text;


          // exit if elastic already applied (or is the mirror element)
          if ($ta.data('elastic')) {
            return;
          }

          // Opera returns max-height of -1 if not set
          maxHeight = maxHeight && maxHeight > 0 ? maxHeight : 9e4;

          // append mirror to the DOM
          if (mirror.parentNode !== document.body) {
            angular.element(document.body).append(mirror);
          }

          // set resize and apply elastic
          $ta.css({
            'resize': (resize === 'none' || resize === 'vertical') ? 'none' : 'horizontal'
          }).data('elastic', true);

          /*
           * methods
           */

          /*
           * initialise
           */

          // listen
          if ('onpropertychange' in ta && 'oninput' in ta) {
            // IE9
            ta['oninput'] = ta.onkeyup = adjust;
          } else {
            ta['oninput'] = adjust;
          }

          $win.bind('resize', forceAdjust);

          scope.$watch(function() {
            return ngModel.$modelValue;
          }, function(newValue) {
            forceAdjust();
          });

          scope.$on('elastic:adjust', function() {
            initMirror();
            forceAdjust();
          });

          $timeout(adjust);

          /*
           * destroy
           */

          scope.$on('$destroy', function() {
            $mirror.remove();
            $win.unbind('resize', forceAdjust);
          });
        }
      };
    }
  ]);

    </script>
    </body>

</html>

Answer 1

我已实现此功能。找到GitHub：github.com/noob93/Smart-Comment-Box Devzone示例使用了AngularJs的弃用功能，我修改了代码并且功能开始正常工作。

合并Angularjs中的两个示例

1 个答案: