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

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

javascript html angularjs

Javascript 由第三方应用程序配置和访问AngularJS$scope,javascript,html,angularjs,Javascript,Html,Angularjs,我正在开发一个AngularJS应用程序，我想集成一些功能，让其他web应用程序与该应用程序交互。我的应用程序应该在同一个网站上运行和触发。iFrame未使用 <head> <link rel="stylesheet" href="style.css"> <script src="https://code.angularjs.org/1.3.10/angular.js"></script> <script src="script.

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

<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>

该应用程序有几个选项卡，我想通过指定选项卡的id将其设置为活动

<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>

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

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

    $scope.$apply();
}

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

<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>

在我的应用程序中，我有一个

ng click

属性，该函数正在其中调用。但是现在，我确实希望另一个应用程序通过调用一些JavaScript函数来设置活动选项卡

<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>

因此，我编写了以下函数：

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

<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>

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

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

    $scope.$apply();
}

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

<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>

在FireBug或Google Chrome的开发者控制台中，它就可以工作了

<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>

你知道怎么回事吗？我该怎么解决

<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>

亲切问候

试试：-

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

<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>

您在jquery范围内，必须使用$scope.apply将其反映给angular

请看下面的演示，它会对您有所帮助

<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>

var-app=angular.module（'app'，[]）；
app.controller（'firstCtrl'，函数（$scope）{
$scope.test=函数（msg）{
$scope.$apply（函数（）{
$scope.msg=msg
})
}
});
$（函数（）{
元素（document.querySelector（'#contoller'））.scope（）.test（“来自jQuery的角度消息”）；
});

{{msg}}
我对你的理解是正确的。您需要一个应用程序，它允许开发人员（如您所说，用户
：）使用HTML/JavaScript交互和配置您的应用程序。看看这个
<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>

一个好的方法是使用配置文件、全局对象或事件绑定来实现这一点。下面的示例向您展示了如何让用户在JavaScript中配置全局配置对象&允许开发人员与您的应用程序交互。例如，使用$scopes

<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>

具有全局配置对象的控制器：
/**
   * 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'
        }  
    }
}]); 

<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>

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>

这给我一个$scope没有定义。这似乎有道理。我不知道变量$scope。$.fn.OfficeUI.EnableTab不在您的控制器中..？如果我将其放入控制器中，则会出现“$.fn.OfficeUI.EnableTab不是函数”错误。请尝试将$scope作为函数中的依赖项，不要将其放入控制器中。比如：-$.fn.OfficeUI.EnableTab=function（element，$scope）{angular.element（$（'#OfficeUI'）））.scope（）.setActiveTab（'tabSendReceive'）；}但是应该如何调用它呢？对不起，我不太明白。谢谢，但这不是我想要的。当您从按钮内调用if时，它工作，但在脚本标记内使用时则不工作。如果我想从脚本标记中调用该方法呢？哇，这太酷了！我不知道，所以允许你做这样的事情。@Complexity你说的“从内部脚本标记”是什么意思。。。请看上面我已经修改了一点答案嗯，当我把一个警报作为第一条语句，然后第二条语句也被执行时，我的代码现在就可以工作了。否则就不是了。有线索吗？@Complexity。。不知道你的第一次和第二次陈述在哪里，请更新代码谢谢。这就是我所需要的。再次感谢你的工作，但是你能告诉我为什么当我在点击事件中而不是在ng点击时它不起作用吗？我的意思是下面的代码不起作用：“on click”是无效的属性。但是，如果您使用“onclick”，它将不会触发您的$scope
，因为angular本身不会监视“onclick”-事件。有没有办法让angular也监视该事件？因为，假设我的用户有一个div元素，当他们单击它时，应该显示一个tab元素，我应该如何完成？用户应该插入ng click=“activateMenu（'mainbar'）；”
，而不是使用本机事件（onclick）。它是如此的相同，它是一个键不同的属性，但过程相同。它既长又宽。