无法在angular中访问$scope

unable to access $scope in angular formly

本文关键字：访问 scope angular 更新时间：2023-09-26

请找到我的控制器文件。

(function () {
  var app = angular.module('myApp',['formly','formlyBootstrap'])
  app.run(function(formlyConfig) {
    formlyConfig.setType({
      name: 'custom',
      templateUrl: 'custom.html'
    });
  });
  app.factory('jsonService', function jsonService($http){
      return {
        getJSON: getJSON
      };
      function getJSON(abc) {
        console.log("Inside" + abc);
        return $http.get('readJson.php?abc='+abc);
      }
  });
  app.controller('MyController', function ($scope) {
    $scope.user = {};
    $scope.fillSecDropDown = [];
    $scope.userFields = [{
        "key": "hobbies",
        "type": "select",
        "templateOptions": {
          "label": "Hobbies",
          "options":[{id:'A',title:'A'},{id:'B',title:'B'}],
          "valueProp": "id",
          "labelProp":"title",
          onChange: function (abc) {
            selectHobbies(abc);
          }
        }
      }]
    })
})();

selecthobbies.js文件。

function selectHobbies(abc)
{
  console.log("here " + abc);
  $scope.fillDropDown = [ // getting error here //
    {
      key: 'custom',
      type: 'custom',
      templateOptions:{
        options: [],
        valueProp: 'id',
        labelProp: 'title'
      },
      controller:function($scope) {
        console.log("here");
        });
      }
    }
  ];
}

我无法访问我的selecthobies .js文件中的$作用域。有没有办法我可以调用不在同一个文件中的onChange函数???

我得到错误$scope没有定义..

index . html文件

<html>
<head>
  <script src="api-check.js"></script>
  <script src="angular.js"></script>
  <script src="formly.js"></script>
  <script src="jquery.min.js"></script>
  <script src="angular-formly-templates-bootstrap.js"></script>
  <script src="mycontroller.js"></script>
  <script src="selecthobbies.js"></script>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
</head>
<body ng-app="myApp" ng-controller="MyController">
    <formly-form model="user" fields="userFields"></formly-form>
    <formly-form model="fillSecDropDown" fields="fillDropDown"></formly-form>
</body>
</html>

由于您请求的是外部文件，因此您可以这样更改函数:

function selectHobbies(scope, abc)
{
  console.log("here " + abc);
  scope.fillDropDown = [ // getting error here //
    {
      key: 'custom',
      type: 'custom',
      templateOptions:{
        options: [],
        valueProp: 'id',
        labelProp: 'title'
      },
      controller:function($scope) {
        console.log("here");
        });
      }
    }
  ];
  return scope;
}

在你的控制器中:

app.controller('MyController', function ($scope) {
    $scope.user = {};
    $scope.fillSecDropDown = [];
    $scope.userFields = [{
        "key": "hobbies",
        "type": "select",
        "templateOptions": {
          "label": "Hobbies",
          "options":[{id:'A',title:'A'},{id:'B',title:'B'}],
          "valueProp": "id",
          "labelProp":"title",
          onChange: function (abc) {
            $scope = selectHobbies($scope, abc);
          }
        }
      }]
    })

但这一点都不漂亮，如果可以的话就不要这样做。如果你需要这样做，那么你的函数有问题，请以更好的方式重构它。

EDIT ->你可以用一个服务来做，用一种更好的方式:

(function() {
   'use strict';
   angular
      .module('yourApp')
      .factory('yourService', yourServiceFactory);
   function yourServiceFactory() {
      var service = {
         get: get
      }
      return service;
      function get(abc) {
         return {
            key: 'custom',
            type: 'custom',
            templateOptions:{
               options: [],
               valueProp: 'id',
               labelProp: 'title'
            },
            controller:function($scope) {
              console.log("here");
            });
         }
      }
   }
})();

然后在控制器中:

app.controller('MyController', function ($scope, yourService) {
        $scope.user = {};
        $scope.fillSecDropDown = [];
        $scope.userFields = [{
            "key": "hobbies",
            "type": "select",
            "templateOptions": {
              "label": "Hobbies",
              "options":[{id:'A',title:'A'},{id:'B',title:'B'}],
              "valueProp": "id",
              "labelProp":"title",
              onChange: function (abc) {
                $scope.fillSecDropDown.push(yourService.get(abc));
              }
            }
          }]
        })

移动selecthobies .js文件。在你的控制器中，应该是这样的:

    (function () {
      var app = angular.module('myApp',['formly','formlyBootstrap'])
      app.run(function(formlyConfig) {
        formlyConfig.setType({
          name: 'custom',
          templateUrl: 'custom.html'
        });
      });
      app.factory('jsonService', function jsonService($http){
          return {
            getJSON: getJSON
          };
          function getJSON(abc) {
            console.log("Inside" + abc);
            return $http.get('readJson.php?abc='+abc);
          }
      });
      app.controller('MyController', function ($scope) {
        $scope.user = {};
        $scope.fillSecDropDown = [];
        $scope.userFields = [{
            "key": "hobbies",
            "type": "select",
            "templateOptions": {
              "label": "Hobbies",
              "options":[{id:'A',title:'A'},{id:'B',title:'B'}],
              "valueProp": "id",
              "labelProp":"title",
              onChange: function (abc) {
                selectHobbies(abc);
              }
            }
          }];
        $scope.selectHobbies = function(abc){
console.log("here " + abc);
  $scope.fillDropDown = [ // getting error here //
    {
      key: 'custom',
      type: 'custom',
      templateOptions:{
        options: [],
        valueProp: 'id',
        labelProp: 'title'
      },
      controller:function($scope) {
        console.log("here");
        });
      }
    }
  ];
}
        })
    })();