0

I have a following html:

<div ng-app="app" ng-controller="NeuesDokumentCtrl" >
    <table cellpadding="0" cellspacing="0" border="0" >
        <tbody>
            <tr>
                <td>
                    <textarea ng-model="kunde"></textarea>
                </td>
                <td>
                    <img src="/_layouts/15/images/checkitems.gif" ng-click="copy(kunde)" />
                </td>
            </tr>
            <tr>
                <td>
                    <input type="text" ng-model="searchField" />
                </td>
                <td>
                    <img src="/_layouts/15/images/delete.gif" ng-click="delete()" />
                </td>
            </tr>
        </tbody>
    </table>
</div>

My Controller has:

$scope.kunde;
$scope.searchField;

$scope.copy = function (value) {
    $scope.searchField = value;
}
$scope.delete = function () {
    $scope.searchField = "";
}

When I test it in a normal page (NOT a SharePoint page) it works.
In Sharepoint it works if I don't edit the second field manually by typing in something.

I write something in the first box. When clicking on the first IMG the value gets copied into the second box. When I click on the second IMG the second box gets cleared. But when I write something in the second box, the two IMGs stop working - the angular functions are called but the model searchField doesn't display the right information.

I get no errors in the console.

Here's a fiddler

  • do you get any errors, on the developer console – Swayam Siddha Sep 18 '15 at 11:43
  • No, no errors are shown in the console. – Emaborsa Sep 18 '15 at 11:46
  • You can try this, update angularJS to 1.4.x, and surface the html in a content editor webpart – Swayam Siddha Sep 18 '15 at 11:49
  • My implementation is built with angular 1.4.x and it works just fine – Swayam Siddha Sep 18 '15 at 11:50
  • Is your code implemented in SP? How do you load the controller? – Emaborsa Sep 18 '15 at 11:51
1

Follow these steps :

  1. Create an empty aspx page (throught sharepoint designer)
  2. port over your angular implementation to that.

The <head> contains

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.min.js"></script>

then

  <script>
    (function() {
            var myApp = angular.module('app',[]);
            myApp.controller('NeuesDokumentCtrl',NeuesDokumentCtrl )
            function NeuesDokumentCtrl($scope) {

            $scope.kunde;
            $scope.searchField;

            $scope.copy = function (value) {
                $scope.searchField = value;
            }
            $scope.delete = function () {
                $scope.searchField = "";
            }

        };
}());
</script>

The <body> contains

        <div ng-app="app" ng-controller="NeuesDokumentCtrl" >
            <table cellpadding="0" cellspacing="0" border="0" >
                <tbody>
                    <tr>
                        <td>
                            <textarea ng-model="kunde"></textarea>
                        </td>
                        <td>
                            <img src="/_layouts/15/images/checkitems.gif" ng-click="copy(kunde)" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input type="text" ng-model="searchField" />
                        </td>
                        <td>
                            <img src="/_layouts/15/images/delete.gif" ng-click="delete()" />
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

Check in the browser to see if its running fine or not.

  1. Then go to the page with master page where you want to surface this implementation.
  2. Edit the page > add a page viewer wepart and set its source as the above aspx page. Detailed instruction here

Your implementation should work fine :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.