Binding refers to a known property

When using binding ensure that it points to a valid property

CheckId	NG1011003
TypeName	BindingRefersToKnownProperty
Severity	CriticalError
Type	Template

Resolution

When using bindings in AngularJS templates, be sure that they point to valid properties. The availability of the used properties depends on the scope associated with the given binding. Scopes in AngularJS can be nested and one binding can reference properties from the different scopes.

Valid property reference (property defined on the controller associated with route)
script.js

angular
  .module('app', ['ngRoute'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider
      .when('/', {
        template: '{{::msg}}',
        controller: ['$scope', function($scope) {
          $scope.msg = 'Hello world';
        }],
        controllerAs: 'vm'
      })
      .otherwise({
        redirectTo: '/'
      })
  }]);

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
  <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-route.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div ng-view></div>
</body>
</html>

Valid property reference (property defined on the controller explicitly referenced using ng-controller)
script.js

angular
  .module('app', [])
  .controller('HomeController', ['$scope', function($scope) {
    $scope.msg = 'Hello world';
  }]);

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div ng-controller="HomeController">{{::msg}}</div>
</body>
</html>

Valid property reference (property defined in nested controllers explicitly referenced using ng-controller)
script.js

angular
  .module('app', [])
  .controller('Controller1', ['$scope', function($scope) {
    $scope.msg1 = 'Hello from Controller1';
  }])
  .controller('Controller2', ['$scope', function($scope) {
    $scope.msg2 = 'Hello from Controller2'
  }]);

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div ng-controller="Controller1">
    <div ng-controller="Controller2">
    {{::msg1}}<br />
    {{::msg2}}
    </div>
  </div>
</body>
</html>

Valid property reference (property defined in a controller explicitly referenced using ng-controller with the controllerAs syntax)
script.js

angular
  .module('app', [])
  .controller('HomeController', function() {
    this.msg = 'Hello world';
  });

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div ng-controller="HomeController as vm">
    {{::vm.msg}}
  </div>
</body>
</html>

Valid property reference (property defined in an ngRepeat directive)
script.js

angular
  .module('app', [])
  .controller('HomeController', function() {
    this.books = [
      {
        title: 'The Hitchhiker\'s Guide to the Galaxy',
        ISBN: '9788636505700'
      },
      {
        title: 'The Restaurant at the End of the Universe',
        ISBN: '9780795326547'
      }
    ];
  });

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div ng-controller="HomeController as vm">
    <ul>
      <li ng-repeat="book in vm.books track by book.ISBN">{{::book.title}}</li>
    </ul>
  </div>
</body>
</html>

Valid property reference (property defined as a component binding)
script.js

angular
  .module('app', [])
  .component('hello', {
    bindings: {
      msg: '@'
    },
    template: '{{::$ctrl.msg}}'
  });

index.html

Invalid property reference (property defines as instance variable of controller but controller used without the controllerAs syntax)
script.js

angular
  .module('app', [])
  .controller('HomeController', function() {
    this.msg = 'Hello world';
  });

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
  <script data-require="[email protected]" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.js"></script>
  <script src="script.js"></script>
</head>
<body>
  <div ng-controller="HomeController">{{::msg}}</div>
</body>
</html>

Message Suppression

SharePoint Customization Analysis Framework (SPCAF), 7.15.0.0

Disclaimer: The views and opinions expressed in this documentation and in SPCAF do not necessarily reflect the opinions and recommendations of Microsoft or any member of Microsoft. SPCAF and RENCORE are registered trademarks of Rencore. All other trademarks, service marks, collective marks, copyrights, registered names, and marks used or cited by this documentation are the property of their respective owners.