如何将对象或变量值从 html 脚本标记传递到 angular 的控制器

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 控制器文件中使用此消息值。我应该如何将此值从 html 获取到 controller.js

Answer 1

如果您必须这样做，您始终可以使用 ng-model 将隐藏输入绑定到 angular，然后使用 '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/

Answer 2

AngularJS 框架的设计使您无需在 JavaScript 中进行 DOM 操作。而是使用指令：

HTML

<body ng-app="myApp" ng-controller="myController">
     <div ng-if="messages.length">
         <p ng-repeat="message in messages">{{message}}</p>
     </div>
     <input ng-model="m" ng-click="showMessage(m)">Enter message</input>
</body>

JS

angular.module('myApp',[]).controller('myController', function ($scope) {
    var vm=$scope;
    vm.messages = [];
    vm.showMessage = function (m) {
         vm.messages.push(m);
    };
});

每次您想进行 DOM 操作时，您应该询问如何使用 Angular 指令进行操作。如果你不能用内置指令来做，问题就变成了如何用自定义指令来做。

如何将对象或变量值从 html 脚本标记传递到 angular 的控制器

how to Pass a object or a variable value from html script tag to the controller of angular

javascript

jquery

javascript-objects

angularjs

angularjs-scope