2

以下の例と send 関数の TODO を参照してください: グローバル送信関数のラベル値を dropboxController dropbox.label に割り当てるにはどうすればよいですか?

<!DOCTYPE html>
<html>
  <head>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
    <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script type="text/javascript">

      window.onload=function() { 
        $('#AddIn').append("<div ng-app='dropboxApp' ng-controller='dropboxController as dropbox'>{{dropbox.label}}</div>");
        angular.module('dropboxApp', [])
                .controller('dropboxController', function () {
                    var dropbox = this;
                    dropbox.label = "hello angular";
                });
        angular.bootstrap($('#AddIn'), ['dropboxApp']);
      }

      function send(label)
      {
        //TODO assign label value to dropboxController dropbox.label
      }
      </script>
  </head>
  <body>
    <div id="AddIn"></div>
    <button onclick="send('new label');">Send</button>
  </body>
</html>
4

1 に答える 1

1

特定の dom 要素のスコープを使用angular.elementおよび取得し、それにラベルを適用します。

とが異なるため、コントローラーに変更dropbox.labelし$scope.labelて注入します。AngularJS コントローラーで「this」と $scope をチェックする$scopethis$scope

心に留めておいてください：ここmyDivでは、スコープがあり、 div行angularにidを追加したものを使用しました。append

可能であればng-click代わりに使用することをお勧めします。onclick

window.onload = function() {
  $('#AddIn').append("<div id='myDiv' ng-app='dropboxApp' ng-controller='dropboxController as dropbox'>{{label}}</div>");
  angular.module('dropboxApp', [])
    .controller('dropboxController', function($scope) {
      var dropbox = this;
      $scope.label = "hello angular";
    });
  angular.bootstrap($('#AddIn'), ['dropboxApp']);
}

function send(label) {
  var scope = angular.element($("#myDiv")).scope();
  scope.$apply(function() {
    scope.label = label;
  })
  console.log(scope.label);
}
<!DOCTYPE html>
<html>

<head>
  <script src="http://apps.bdimg.com/libs/angular.js/1.4.0-beta.4/angular.min.js"></script>
  <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>

<body>
  <div id="AddIn"></div>
  <button id="myButton" onclick="send('new label');">Send</button>
</body>

</html>

于 2015-10-27T11:49:24.013 に答える