<!doctype html>
<html ng-app="Demo">
<head>
<meta charset="utf-8" />
<title>
AngularJS In Firefox: TypeError: Missing Argument 1 When Calling Function b.get()
</title>
</head>
<body>
<h1>
AngularJS In Firefox: TypeError: Missing Argument 1 When Calling Function b.get()
</h1>
<!--
Here, we have a simple directive - bnList - that is not going to be passed
any additional attribute data.
-->
<div bn-list>
This one has no watch.
</div>
<!--
In this version of the directive - bnList - we are going to tell it to watch
the scope expression "somethingDynamic" and then react to it. The outcome of
the change is irrelevant; the point of interest is that we have a directive
that is conditionally checking for an attribute called "watch".
-->
<div bn-list watch="somethingDynamic">
This one has a watch and is going to react to changes in "somethingDynamic."
</div>
<!-- Load scripts. -->
<script type="text/javascript" src="../../vendor/angularjs/angular-1.3.16.min.js"></script>
<script type="text/javascript">
// Create an application module for our demo.
var app = angular.module( "Demo", [] );
// --------------------------------------------------------------------------- //
// --------------------------------------------------------------------------- //
// I define a directive that conditionally reacts to some scope expression.
app.directive(
"bnList",
function() {
// Return the directive configuration object.
return({
link: link,
restrict: "A"
});
// I bind JavaScript events to the local scope.
function link( scope, element, attributes ) {
// Check to see if the "watch" attribute was passed-in. If so, we
// need to set up a watcher so that we can react to changes.
// --
// CAUTION: In Firefox, this conditional check will always be true
// because Firefox has "Object.prototype.watch()" in the root
// prototype of every object.
// --
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/watch
if ( attributes.watch ) {
// Watch for changes in the watch expression.
// --
// CAUTION: If the watch attribute actually exists, you will
// start to watch that object-local value (as you intended).
// However, if the watch attribute is not defined, this ".watch"
// reference will crawl up the prototype chain and start
// referencing the Object.prototype.watch() function described
// above. That will cause an error, no doubts.
scope.$watch( attributes.watch, handleListChanges );
}
// I update the directive state in reaction to the change in the
// watched expression.
function handleListChanges() {
// ... not relevant to this demo.
}
}
}
);
</script>
</body>
</html>