Question

我正在开发AngularJS应用程序，我想集成一些功能，让其他Web应用程序与应用程序进行交互。我的应用程序应该在同一个网站上运行和触发。 iframe使用。

该应用程序有几个标签，我想通过指定标识符来设置标签。

这是通过以下方法在AngularJS控制器中完成的：

$scope.setActiveTab = function(tabId) {
    ribbon.setActiveTab(tabId);

    $scope.$apply();
}

在我的应用程序中，我有一个ng-click属性，并且正在调用此函数。但现在，我确实希望其他应用程序通过调用一些JavaScript函数来设置活动选项卡。

因此，我写了以下功能：

$.fn.OfficeUI.EnableTab = function(element) {
    angular.element($('#OfficeUI')).scope().setActiveTab('tabSendReceive');
}

然而，这不起作用，但是当我通过这个方法时：

angular.element($('#OfficeUI')).scope().setActiveTab('tabSendReceive');

在FireBug或Google Chrome的开发者控制台中，它正在运作。

对于什么是错误以及我应该如何解决这个问题有任何想法？

亲切的问候

Answer 1

请参阅以下有助于您的演示。

＆＃13;

var app = angular.module('app', []);

app.controller('firstCtrl', function($scope) {


  $scope.test = function(msg) {


    $scope.$apply(function() {

      $scope.msg = msg

    })

  }

});






$(function() {
  angular.element(document.querySelector('#contoller')).scope().test("Message for Angular from jQuery");
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="app">
 
  <div id="contoller" ng-controller="firstCtrl">
    {{msg}}
  </div>
</body>

＆＃13;

Answer 2

据我了解你。您需要一个允许开发人员（正如您所说Users :)通过使用HTML / JavaScript来交互和配置您的应用程序的应用程序。结帐plunker demo。

一种好的方法是使用配置文件，全局对象或事件绑定来执行此操作。以下示例向您展示了如何让用户在JavaScript和＆amp ;;中配置全局配置对象。允许开发人员与您的应用程序交互。例如，使用$scopes。

具有全局配置对象的控制器：

/**
   * Active state holder
   * @type {null|integer} 
   */ 
  var myConfig = {
    menus : {
      mainbar: {
        active: true
      },
      subbar: {
        active: false
      },
      othersubbar: {
        active: false
      }
    }
  };

var OfficeUIRibbon = angular.module('OfficeUIRibbon', [])

OfficeUIRibbon.factory('OfficeUIRibbonFactory', [function() {

      return {
        setActiveTabId: function (tabId) {
          activeTabId = tabId;
        }
      }
}]); 

OfficeUIRibbon.controller('OfficeUIRibbon', ['$scope', '$http', '$animate', function($scope, $http, $animate) {

    //as scope set
    $scope.isVisible = function (name){
      if (myConfig.menus[name].active) {
        return 'active';
      }
    } 

    $scope.activateMenu = function (name) {
      console.log(name);
      if (!myConfig.menus[name].active) {
       myConfig.menus[name].active = true;
      }
    }

    $scope.deactivateMenu = function (name) {
      if (myConfig.menus[name].active) {
       myConfig.menus[name].active = false;
      }
    }


    $scope.listing =  {
        mainbar: {
          id: 1,
          label: 'mainbar'
        },
        subbar: {
          id: 2,
          label: 'subbar'
        }, 
        othersubbar: {
          id: 3, 
          label: 'othersubbar'
        }  
    }
}]);

HTML的模板：

<head>
  <link rel="stylesheet" href="style.css">
  <script src="https://code.angularjs.org/1.3.10/angular.js"></script>
  <script src="script.js"></script>
</head>

<body ng-controller="OfficeUIRibbon">
  <ul>
    <li ng-repeat="(key,list) in listing" ng-class="isVisible(key)">
      {{ list.label }}
    </li> 
  </ul>

  <button ng-click="activateMenu('mainbar');">Activate Mainmenu</button>
  <button ng-click="deactivateMenu('mainbar');">Deactivate Mainmenu</button>
</body> 
</html>

用户配置应在加载角度之前设置。例如，默认情况下禁用mainbar：

myConfig.menus.mainbar.active = false;

Answer 3

尝试： -

$scope.apply(function(){
angular.element($('#OfficeUI')).scope().setActiveTab('tabSendReceive');
})

您处于jquery范围内，您必须使用$ scope.apply将其反映为angular。

由第三方应用程序配置和访问AngularJS $ scope

3 个答案: