Angular JS 指令在 visualforce(salesforce) 中不起作用？答案

【问题标题】：Angular JS directives doesn’t work in visualforce(salesforce)?Angular JS 指令在 visualforce(salesforce) 中不起作用？
【发布时间】：2015-03-30 05:50:40
【问题描述】：

在视觉力页面（作为容器）中，我在 Angular JS 中创建了一个自定义指令，但它不起作用。事实上，该指令甚至没有被调用！虽然这在 JSFiddle 中工作得很好

以下是自定义指令。当我在 HTML 标记中使用此指令时，它不会在控制台日志上显示任何内容。我创建了多个指令并看到了相同的行为。我相信在 visualforce 容器中使用自定义指令时存在错误。你们中的任何人都遇到过同样的问题吗？任何帮助将不胜感激。

谢谢！ -SS

更新

这是自定义指令的 JSFiddle，它工作正常，但是当我在视觉强制页面中使用它时，它不起作用。（即使该指令有一个 console.log，控制台中也没有出现任何内容。这证明该指令没有被调用） http://jsfiddle.net/ssah13/3y1z5943/

请注意：该指令去除了 OppName 中下划线前后的所有内容。例如：如果 OppName 为“111111_Test_123445”，则输出为“Test”

这是视觉力页面和控制器：

页面：

<apex:page docType="html-5.0" controller="SalesActions">
  <head>
    <script src="//code.jquery.com/jquery-1.11.0.min.js"/>
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"/>
  </head>
        <!-- HTML FOR APP -->
        <!-- To use bootstrap with visualforce everything needs to be wrapped with "bs" class-->
        <div ng-app="salesApp" class="bs">
          <div ng-controller="salesController">

              <div ng-repeat="sfResult in salesforceResponse">
                <table>
                  <tr ng-repeat="opp in sfResult.opportunities">
                    <td>
                      <span opp-name="" input="opp.Name">
                          {{opp.Name}}
                      </span>
                    </td>
                  </tr>
                </table>
              </div>
          </div>
        </div>

      <!-- ACTUAL ANGULAR JS APP : Later on move this to salesworkspace.js-->
    <script type = "text/javascript">
      var ngApp = angular.module('salesApp', []);
      //Opp Name directive
      ngApp.directive('oppName', function () {
          return {
              restrict: 'A',
              scope: {
                  input: '='
              },
              link: function (scope, element, attrs) {
                 console.log('Input: ', scope.input);
                  var input = scope.input;
                  if (!input) {
                      return;
                  }
                  // AccountName_Test_123445
                  if (input.indexOf('_')) {
                      scope.input = input.split('_')[1];
                  }
              }
          };
      });

        ngApp.controller('salesController', ['$scope',
            function($scope) {

                  $scope.salesforceResponse = [];
                  Visualforce.remoting.Manager.invokeAction(
                      '{!$RemoteAction.SalesActions.getAllAccounts}',
                      function(result, event) {
                          if (event.status) {
                            $scope.$apply(function() {  //Use Apply as the scope changed outside Angular Context?
                             $scope.salesforceResponse = result;
                              console.log($scope.salesforceResponse);
                              });
                           } else {
                            console.log(event);
                          }
                        }
                  );
        } //End of function
      ]); //End of Controller method
  </script>
  </apex:page>

控制器： salesActions.cls

public with sharing class SalesActions {

    public SalesActions() { } // empty constructor

    @RemoteAction
    public static List<accountWrapper> getAllAccounts() {
        List<accountWrapper> accountResponse = new List<accountWrapper>();
        List<account> accs = [SELECT Id, Name, Type, Strategic_Account_Management__c,
                                    (SELECT Id FROM Opportunities) ,
                                    (SELECT Name FROM Contacts)
                              FROM Account
                              Order by Name]; //Add a Filter here. WHERE ownerId = :Userinfo.getUserId();

        Set<Id> accountIds = new Set<Id>();
        for(account acc : accs) {
            accountIds.add(acc.Id);
        }

        Map<Id,Opportunity> oppIdToOpp = new Map<Id,Opportunity>([
                                                SELECT Id,Name, Account.Name, Agency__r.Name, Campaign_EVENT__c,Rate_Type__c,StageName,Amount,CurrencyISOCode,
                                                       Probability,CampaignStartDate2__c,CampaignEndDate2__c,Contact__c,Sales_Notes__c,
                                                (SELECT SplitAmount, SplitOwner.Name,SplitPercentage, Split__c FROM OpportunitySplits)
                                                 FROM Opportunity WHERE AccountId IN :accountIds]// Remove WHERE AccountId =:accountId and Add WHERE account.ownerId=:UserInfo.getId();
                                                 );


        Map<Id,List<Partner>> accountIdToPartners = new Map<Id,List<Partner>>();
        for(Partner p :[SELECT AccountFromId,AccountTo.Name FROM Partner WHERE AccountFromId IN :accountIds]) {
            if(accountIdToPartners.containsKey(p.AccountFromId)) {
                accountIdToPartners.get(p.AccountFromId).add(p);
            } else {
                accountIdToPartners.put(p.AccountFromId, new List<Partner>{p});
            }
        }
        for(Account acc : accs) {
            accountWrapper accWrapper = new accountWrapper();
            accWrapper.account = acc; // This will add all the accounts and related contacts
            accWrapper.opportunities = new List<Opportunity>();
            accWrapper.partners = new list<Partner>();
            if(accountIdToPartners.containsKey(acc.Id)){
                accWrapper.partners = accountIdToPartners.get(acc.Id);
            }
            for(Opportunity opp : acc.Opportunities) {
                accWrapper.opportunities.add(oppIdToOpp.get(opp.Id));  // This will add all the opportunties and opportunitySplits
            }
            accountResponse.add(accWrapper);
        }
        return accountResponse;
    }

    public class accountWrapper {
        public Account account { get; set; }
        public List<Partner> partners { get; set; }
        public List<Opportunity> opportunities { get; set; }
    }
}

【问题讨论】：

你能提供一个例子来证明它有效吗？我在让您的代码正常工作时遇到问题。另外，我还没有遇到过 Angular 和 Salesforce 的问题。
如果没有完整的代码和错误，很难找出问题所在。但也许这篇文章会有所帮助：developer.salesforce.com/blogs/developer-relations/2014/07/…
我添加了一个有效的 JSFiddle、visualforce 页面和控制器。即使该指令有一个 console.log，控制台中也不会出现任何内容。在 visualforce 容器中使用自定义指令时似乎存在错误。

标签： javascript angularjs angularjs-directive salesforce visualforce

【解决方案1】：

对我来说，这就是我让它工作的方式：

ngApp.directive('testDirective', function () {
  return {
    restrict: 'E',
    scope: {
        input: '='
    },
    template: '<p>{{input}}</p>',
    link: function (scope, element, attrs) {
       console.log('Input: ', scope.input);
        var input = scope.input;
        if (!input) {
            return;
        }
        // AccountName_Test_123445
        if (input.indexOf('_') !== -1) {
            scope.input = input.split('_')[1];
        }
      }
    };
  });

然后在html中：

<test-directive input="opp.Name"></test-directive>

这些只是一些小的变化。不完全确定为什么它以前在 VF 中不起作用。在 VF 中，我总是尝试使用指令作为元素，因为 VF 不能像普通 HTML 那样具有那些空属性。然后你应该在指令中定义一个模板或 templateUrl。（您也可以在此处使用 VF 页面作为模板 - 即使使用标准控制器或自定义控制器触发！）

哦，当然可以再次查看ngRemote，因为它可以帮助您在 VF 上使用 AngularJS 应用程序。

希望这会有所帮助！

弗洛里安

【讨论】：