从全局函数向 angular 控制器传递数据

Question

参见下面的示例和发送函数中的 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>

Answer 1

使用 angular.element 并获取特定 dom 元素的范围并为其应用标签。

将dropbox.label更改为$scope.label并在控制器中注入$scope，因为this和$scope不同。检查 'this' vs $scope in AngularJS controllers

请记住：这里我使用了 myDiv，它具有 angular 的作用域，并在 append div 行中添加了 id。

最好使用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>

从全局函数向 angular 控制器传递数据

pass data to angular controller from a global function

global-scope

angularjs