Question

我试图在我的cfm文件中使用AngularJS来显示来自cfquery结果集的数据。我在cfm文件中使用了以下代码。我无法看到任何输出。附：我是AngularJS的新手。所以，如果有人能帮助我，我会很高兴。

＆＃13;

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html ng-app="Demo">

<head>
  <link rel="stylesheet" href="/Applications/_Common/style.css" type="text/css">
</head>

<body>
  <cfsetting enablecfoutputonly="Yes">
    <CF_GetProjectData project_number=349246 query_name="GetProject">
      <div ng-controller="DemoController">
        <div ng-repeat="number in project">
          {{number.project_number}} - {{number.project_name}}
        </div>
        <!-- <input name="imprint" type="text" size="10" ng-model="first">
        <p>{{first}}</p> -->
      </div>

      <cfoutput>
        <script language="JavaScript" src="/CFIDE/scripts/wddx.js"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
        <script language="text/javascript">
          var theProjectArray; < cfwddx action = "CFML2JS"
          input = "#GetProject#"
          toplevelvariable = "theProjectArray" >
        </script>
        <script>
          var Demo = angular.module("Demo", []);
          Demo.controller("DemoController", function($scope) {
            $scope.project = theProjectArray;
            alert(theProjectArray);
          });
        </script>
      </cfoutput>

      <cfsetting enablecfoutputonly="No">
</body>

</html>

＆＃13;

Answer 1

我不确定Angular.js，但根据您发布的代码，您似乎需要在ng-controller中包含div cfoutput。这是因为您已设置enablecfoutputonly="Yes"。因此，只会呈现cfoutput内的内容。

Answer 2

我是一名CF开发人员，目前正在学习Angular。首先，Angular是一个MVC框架，最适合您的是遵循Separation of Concern（SoC）规则。我知道，除非你在CF中使用对象关系映射（ORM）这是违反直觉的，但它会为你节省太多麻烦和以后的麻烦。

现在为你的问题，但我会

合并两个脚本块。
你的变量theProjectArray是用var定义的，所以不是全球。你确定它正在进入你的控制器吗？
行toplevelvariable =“theProjectArray”＆gt; ......是更大的比签一个类型-o？

完成后我会调用console.log（theProjectArray）;在它被定义之后。然后是console.log（theProjectArray）;再次在你的控制器中，以确保它正确传递。

这里仅供您参考，这是一个控制器和角度调用CFC的工厂的一个非常基本的例子。因为我一直在这样做，所以我唯一一次使用ColdFusion就是检索数据并对其进行建模。它简化了我的代码和逻辑，并且允许我做更多的事情，因为我不依赖于ColdFusion。

var myapp = angular.module("test.myapp", [])


    myapp.controller("MyController", function($scope, getevent) {
        $scope.myData = {};
        $scope.myData.doUpdate = function(item, event) {

            getevent.GetProgram(item).success(function(data, status, headers, config) {
                                             console.log(data.DATA);
                                              $scope.test = data.DATA;
                                              $scope.test.DATE = new Date(data.DATA.DATESTART);
                                          });

            getevent.GetProgram(item).error(function(data, status, headers, config) {
                                               console.log("FAILED: "+item);
                                               alert("AJAX failed!");
                                           });
        }
    });




    myapp.factory('getevent', function($http){
        return {
                GetProgram: function(item) {
                    var programInfo = '/foundation/cfc/calendar.cfc?method=getevent&eventid='+item;
                    return $http.get(programInfo);
                }
                };
    });

在AngularJS中使用Coldfusion查询结果集

2 个答案: