javascript - 如何将对象或变量值从html脚本标记传递到 Angular Controller

Question

function showMessage(message) {
    console.log("message type is" +message.type);
    var response = document.getElementById('response');
    var p = document.createElement('p');
    p.style.wordWrap = 'break-word';
    p.appendChild(document.createTextNode(message));
    response.appendChild(p);    
} 

我用 HTML 脚本标记编写了这段代码。 我想在我的 angularjs Controller 文件中使用此消息值。我应该如何从html获取这个值到controller.js

Answer 1

如果您必须这样做，您始终可以使用 ng-model 将隐藏输入绑定(bind)到 Angular，然后 onload 使用“showMessage”方法来填充该输入。然后，Angular 会将数据存储在 ng-model 指定的存储位置。

HTML:

<input id="myMessage" type="hidden" value="" ng-model="myMessage"/>

脚本标签:

<script>
        function showMessage(message) {
            console.log("message type is" +message.type);
            var response = document.getElementById('response');
            var p = document.createElement('p');
            p.style.wordWrap = 'break-word';
            p.appendChild(document.createTextNode(message));
            response.appendChild(p);

            // not sure what all the above is doing, but assuming message is just a string, do this...
            setTimeout(function() {
              document.getElementById('myMessage').value = message;
            });
        }      
</script>

Angular 代码:

.controller($scope, function($scope) {
   $scope.myMessage;
   var myInt = setInterval(function() {
     if (document.getElementById('myMessage').value !== '') {
       $scope.myMessage = document.getElementById('myMessage').value;
       $scope.$apply();
       clearInterval(myInt);
     }
   }, 150);
});

虽然这有点hacky，但它确实有效。

However, I would do what @GandalftheWhite said. Gandalf is always right ;)

https://jsfiddle.net/jvincilione/cft3reo3/